CSS Font Özellikleri
Font özellikleri web sayfamizdaki metinlerin font ailesini, boyutunu, kalinlik ayarlarini, büyük-küçük harf olmasını ve stilini değistirmek için kullanılır.
CSS Font Aileleri
CSS de 2 farkli font aile ismi vardir:
- Jenerik Aile Ismi (Generic Family) – font aile grubunun genel ismidir (Serif,Monospace vb)
- Font Ailesi (font family) – font ailesinin özellesmis ismidir (Times New Roman,Arial vb)
| Sosyal Aile | Font Ailesi | Açiklama |
|---|---|---|
| Serif | Times New Roman Georgia | Serif fontlarinda bazi karakterlerin sonunda küçük bir çizgi vardir. Serif kelimesi matbaacilikta “harfin altinda ya da üstündeki ince çizgilerden biri” anlamina gelir. |
| Sans-serif | Arial Verdana | “Sans” kelimesi burda without(olmadan) anlaminda kullanilir yani Serif ailesindeki gibi harfin altinda yada üstünde küçük bir çizgi yoktur. |
| Monospace | Courier New Lucida Console | Tüm monospace karakterleri ayni genislige sahiptir. |
Font Ailesi (Font Family)
Bir metne ait font ailesi font-family özelligi ile ayarlanir. font-family özelligi ayni anda birden fazla font ismini içerebilir. Bu özellige “fallback” yani “son çare denir”. Eger tarayici ilk yazilan fontu desteklemiyorsa, otomatik olarak siradaki fontu dener. Bu özelligi kullanirken ilk olarak istediginiz özel font seçerek baslayin ve jenerik bir font ile bitirin. Böylece tarayici seçtiginiz fontlari desteklemiyor ise son yazdigini jenerik fontu seçecektir.
Eger font ismi birden fazla kelimeden olusuyor ise font ismini çift tirnak içine alin. Örnegin : “Times New Roman”.
Birden fazla font atamasi yaparken asağidaki gibi her font ismini virgülle “,” ayiriyoruz.
p{font-family:"Times New Roman", Times, serif;}CSS font-family
Bu paragraf Times New Roman fontu ile yazılmıştır.
Bu paragraf Arial fontu ile yazılmıştır.
Font Sitili (Font Style)
font-style özelligi genellikle italik yani egik yazi yapmak için kullanilir.
Bu özellik 3 farkli deger alir:
- normal – Metin normal görünür
- italic – Metin italik yani egik yazi olarak görünür
- oblique – Metin yatik görünür (oblique italic ile benzerdir fakat daha az desteklenir)
Örnek:
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;Bu paragraf, normal.
Bu paragraf, italic.
Bu paragraf, oblique.
Font Boyutu (Font Size)
font-size öelligi metnin boyutunu ayarlamak için kullanılır. Metnin boyutunu ayarlamak sayfamızın dizaynı için oldukça önemlidir.
Font boyutu 2 sekilde ayarlanir. Birincisi kesin boyutlar ikincisi ise göreceli boyutlar olarak adlandirilir.
Kesin Boyutlar
- Metin için belirli bir boyut verir.
- Kullaniciya metin boyutunu degistirme hakki vermez.
- Eger ekran boyutu belirli ise kesin degerleri kullanmak uygundur.
Göreceli Boyutlar
- Metin boyutu diger elementlere göre göreceli olarak ayarlanir.
- Kullaniciya tarayici üzerinden metin boyutunu degistirme hakki verir.
- Eger bir metin boyutu ayarlamadiysaniz, metin boyutu tarayici varsayilan degeri olan 16px olarak ayarlanir. 16px 1em ye esittir.
Bir paragrafi sanki başlık gibi veya bir başlığı sanki bir paragraf gibi göstermek için font-size özelligini kullanmayiniz. Bu tür islemler için her zaman <h1>-<h6> ve <p> HTML etiketlerini kullaniniz.
Font Büyüklügünü Piksel Olarak Vermek
Font büyüklügünü piksel olarak vermek, fony boyutu üzerinde tam bir kontrol saglar.
h1 {font-size:40px;}
h2 {font-size:25px}
p {font-size:12px;}Font Büyüklügünü Em Olarak Vermek
Internet Explorerdaki boyutlandirma problemlerini asmak için çogu gelistirici font boyutu olarak piksel yerine em kullanir.
Em biriminin kullanimi W3C tarafindan tavsiye edilir.
1em boyutu varsayilan font boyutudur ve 16px’e esittir.
pikselden em ye dönüsüm piksel/16=em formülü ile hesaplanabilir.
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.5625em;} /* 25px/16=1.5625em */
p {font-size:0.75em;} /* 12px/16=0.75em */Yukaridaki örnekde ki font boyutlari bir önceki örnek ile aynidir fakat tüm tarayicilarda sorunsuz çalisacak olan em birimi kullanilmistir.
Yüzde ve em birimlerinin beraber kullanilmasi
Asagidaki örnek çözüm tüm tarayicilarda sorunsuz çalisir.
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}body seçicisinde font boyutunu 100% ayarliyoruz böylece ilk olarak sitenin varsayilan font boyutunu ayarlamis oluyoruz. daha sonra diger seçicilerde em kullanarak bu sabit bir font boyutu ayarlamış oluyoruz.
Artik CSS kodumuz sorunsuz olarak tüm tarayicilarda çalisacaktir. Tüm tarayicilarda ayni boyutlarda metinlerimiz olacaktir. Zoom ve yeniden boyutlandirma islemleri bu sayede tüm tarayicilar tarafindan desteklenecektir.
Örnek:
Bu paragraf için font-size:250% verilmiştir.
Bu paragraf için font-size:150% verilmiştir.
Bu paragraf için font-size:100% verilmiştir.
Bu paragraf için font-size:18% verilmiştir.
Bu paragraf için font-size:xx-large verilmiştir.
Bu paragraf için font-size:x-small verilmiştir.
Bu paragraf için font-size:xx-small verilmiştir.
font-size özelliginin aldigi degerler ve açiklamalari
| Deger | Açiklama |
|---|---|
| xx-small | font boyutunu xx-small(ektra ektra küçük) olarak ayarlar. |
| x-small | font boyutunu ekstra küçük olarak ayarlar. |
| small | font boyutunu küçük olarak ayarlar. |
| medium | font boyutunu ekstra medyum olarak ayarlar. Bu deger varsayilandir. |
| large | font boyutunu büyük olarak ayarlar. |
| x-large | font boyutunu ektra büyük olarak ayarlar. |
| xx-large | font boyutunu xx-large (ektra ektra büyük) olarak ayarlar. |
| smaller | font boyutunu parent elementin metin boyutundan daha küçük olarak ayarlar. |
| larger | font boyutunu parent elementin metin boyutundan daha büyük olarak ayarlar. |
| length | font boyutunu px,cm gibi sabit bir boyutta ayarlar. |
| % | font boyutunu parent elementin boyutunun yüzdesi olarak ayarlar. |
| inherit | font boyutunu parent elementin boyutunun ile ayni olacak sekilde ayarlar. |
Internet Explorer inherit degerini desteklemez.
Metni Kalinligini Ayarlamak
Metnin kalinligini ayarlamak için font-weight özelligini kullaniyoruz.
p.normal {font-weight:normal;}
p.ince {font-weight:lighter;}
p.kalin {font-weight:bold;}
p.cok_kalin {font-weight:900;}Bu paragraf için font-weight:normal; kullanilmistir.
Bu paragraf için font-weight:lighter; kullanilmistir.
Bu paragraf için font-weight:bold; kullanilmistir.
Bu paragraf için font-weight:900; kullanilmistir.
Fontlari Büyük Küçük Harflerle Göstermek (font-variant)
font-variant özelligine small-caps degeri verildigi zaman tüm küçük harfler büyük harf gibi gösterilir fakat küçük harflerin boyutu büyümez. Bir önceki dersimizde anlattigimiz text-transform ile karistirilmamalidir. text-transform özelligi tüm harfleri büyük harfe çevirir ve boyutlarinida büyük harflerle ayni yapar fakat font-variant küçük harfleri büyük harf seklinde yazarken boyutlarini büyütmez.
font-variant:small-caps;
Bu paragraf için font-variant:normal; kullanilmistir.
Bu paragraf için font-:small-caps; kullanilmistir.
Örnek:
font-variant özelligine small-caps degeri vermek türkçe karakterlerde sorun çikarabilir.
Tüm font özelliklerini tek bir satirda ayarlamak (Kisa Kullanim)
Font özelliklerini tek tek degilde tek bir satirda tanimlamak istersek asağidaki gibi kullanabiliriz.
font: font-style font-variant font-weight font-size/line-height font-family;
CSS Font Özellikleri ve Açiklamalari:
| Özellik | Açiklama | Aldigi Degerler |
|---|---|---|
| font | Tüm font özelliklerini tek bir satirda tanimlamak için kullanilir | font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar inherit |
| font-family | Metin için font ailesini belirlemek için kullanilir | family-name generic-family inherit |
| font-size | Metin için font boyutunu belirlemek için kullanilir | xx-small x-small small medium large x-large xx-large smaller larger length % inherit |
| font-style | Metin için font sitilini belirlemek için kullanilir | normal italic oblique inherit |
| font-weight | Metin için font kalinligini belirlemek için kullanilir | normal bold bolder lighter 100 200 300 400 500 600 700 800 900 inherit |
| font-variant | Karakterlerin normalmi yoksa büyük harflemi görünecegini belirlemek için kullanilir. small-cap degerinde küçük harfler büyük harf olarak gösterilir fakat boyutlari büyümez | normal small-caps inherit |