$1.99 Domains* at GoDaddy.com

CSS ile Font Biçimi

css-15

Bir önceki sayfada metin özelliklerini CSS ile tanımlamayı görmüştük. Şimdiki dersimizde ise yazı fontlarının özellikleri ile oynayacağız.

Font Türü

Önce font seçmeyi öğrenelim. HTML derslerinde <font> kodu ve face=”…” parametresi ile yazı fontunu belirliyorduk. CSS’de ise bu iÅŸi font-family özelliÄŸi ile yaparız:

 

h1

{

font-family:Arial

}

h2

{

font-family:Courier

}

h3

{

font-family:Comic Sans MS

}

h4

{

font-family:Verdana

}

Font Büyüklüğü

HTML derslerinde fontların büyüklüğünü belirlemek için <font> kodunu ve size=”…” parametresini kullanıyorduk. CSS’de ise font-size özelliÄŸine deÄŸerler veririz. Verilen deÄŸer yüzde oranı (%ÅŸeklinde olabilir veya pt (point) birimi cinsinden olabilir. Bunların yanı sıra xx-large, x-large, large, medium, small, x-small, xx-small gibi gömlek ölçülerini de kullanabiliyoruz. Veya smaller (yürürlükteki deÄŸerden bir küçük), larger (yürürlükteki deÄŸerden bir büyük) gibi deÄŸerler de kullanabiliyoruz:

 

h1

{

font-size:xxlarge

}

h2

{

font-size:160%

}

h3

{

font-size:larger

}

h4

{

font-size:10pt

}

Font EÄŸikliÄŸi

Fontların dik stilde mi, yoksa yana eğik stilde mi görüntüleneceğini font-style özelliğine değerler vererek belirleriz. Eğer fontların normal (dik stilde) olmasını istiyorsak normal değerini, eğik olmasını istiyorsak italic veya oblique değerini veririz:

 

h1

{

font-style:normal

}

h2

{

font-style:italic

}

h3

{

font-style:oblique

}

Büyük Harf, Küçük Harf

Eğer fontların tamamının büyük harflerle yazılmasını istiyorsak (BÜYÜK HARF; boyutça büyük değil) font-variant: small-caps özellik ve değerini kullanırız. Eğer bunu istemiyorsak normal değerini veririz:

 

h1

{

font-variant:small-caps

}

p

{

font-variant:normal

}

Font Kalınlığı

EÄŸer fontlarımızın kalın (bold) olmasını istiyorsak, font-weight özelliÄŸinden yararlanırız. Bunun için font-weight özelliÄŸine normal, bold (kalın), bolder (yürürlükteki kalınlıktan bir deÄŸer daha kalın), lighter (yürürlükteki kalınlıktan bir deÄŸer ince) gibi standart deÄŸerler verebiliriz. Veya 100, 200,…,800,900 gibi sayısal deÄŸerler de verebiliriz. 400 sayısal deÄŸeri, normal font deÄŸerini verir. 700 sayısal deÄŸeri ise kalın (bold) font deÄŸerini verecektir.

 

h1

{

font-size:14pt;

font-weight:900

}

h2

{

font-size:14pt;

font-weight:bold

}

h3

{

font-size:14pt;

font-weight:500

}

h4

{

font-size:14pt;

font-weight:normal

}

h5

{

font-size:14pt;

font-weight:lighter

}

h6

{

font-size:14pt;

font-weight:200

}

Font Özelliklerini Tek Kodla Tanımlama

Font formatı sayfamızda öğreneceğimiz son özellik: font. Bu özellik fontların tüm özelliklerini aynı anda belirtmeye yarıyor. font özelliği üç standart tip değer alıyor:

font: (font-style deÄŸeri) (font-weight deÄŸeri)
font: (font-style deÄŸeri) (font-variant deÄŸeri) (font-weight deÄŸeri) (font-size deÄŸeri) (font-family deÄŸeri)
font: (font-style deÄŸeri) (font-variant deÄŸeri) (font-weight deÄŸeri) (font-size deÄŸeri)/(line-height deÄŸeri) (font-family deÄŸeri)

code

 

{

font: italic bolder

}

p, h3, td, pre

{

font: italic normal bold 12px arial

}

blockquote, sub, sup, strong

{

font: oblique small-caps 900 10px/12px courier

}

 

 

Font formatı sayfamız da bu kadar. Bu sayfada özelliklerin CSS formatında nasıl yer alacağını gösterdim ama örnek çözmedim. Çünkü HTML’de iÅŸlediÄŸimiz konuyla paralel gidildiÄŸi için, okuyucuların yazılanları kolaylıkla anladığını düşünüyorum. Tabi sizlerin birkaç örnek çözmenizde fayda var. Benim verdiÄŸim yazım ÅŸekillerinde h1-h6, p gibi kodları kullandım ama siz yapacağınız örneklerde çeÅŸitli kodların özellikleri üzerinde oynayabilirsiniz. 

 

 

 

 

 

 

Kategoriler: CSS, Web Programlama

Tags: , , ,

Yorumlar

Yorum Yok

Yorumunuzu Ekleyin

Yorum eklemek için giris yapmalısınız.