FONT-FAMİLY
Yazının font ailesini belirtir. Bu özellikle bir font ailesi oluşturacağımız gibi birden çok font ailesinide bir başlıkta toplayabiliriz. Her tarayıcı bütün fontları desteklemediğinden birden fazla fontları grup içerisinde barındırın.
h1 {font-family: arial, verdana, sans-serif;}
h2{font-family: “Times New Roman”, serif;}
Basit bir örnek:
<html>
<style>
h1 {font-family: arial, verdana, sans-serif;}
h2{font-family: “Times New Roman”, serif;}
</style>
<body>
<h1> Arial font tipi </h1>
<h2> Times New Roman </h2>
</body>
FONT-STYLE
Bu özellik sayesinde yazının italik olup olmama niteliğini bildiririz.
Bu özellik 3 farklı değer alır:
- normal – Metin normal görünür
- italic – Metin italik yani eğik yazı olarak görünür
- oblique – Metin yatık görünür (oblique italic ile benzerdir fakat daha az desteklenir)
<html><style>p.normal{font-style:normal}p.italic{font-style:italic}</style><body><p class="normal">bu paragrafnormalgörünür</p><p class="italic">Bu paragraf italik görünür</p></body></html>Bu paragraf, normal.
Bu paragraf, italic.
Bu paragraf, oblique.
FONT-WEIGHT
Bu özellik ile fontun kalınlığı ile oynayabiliriz.
p.normal {font-weight:normal;} // Kalınlık değeri belirlenmemiştir. |
2 |
p.thick {font-weight:bold;} // Yazdığımız yazılar kalın olarak görünecektir. |
3 |
p.thicker {font-weight:900;} // Kalınlık değeri üzerinde oynamalar yapabileceğimiz kullanım şekli. |
p {font-size:12px}
Font Büyüklüğünü Em Olarak Vermek
Internet Explorerdaki boyutlandırma problemlerini aşmak için çoğu geliştirici font boyutu olarak piksel yerine em kullanır.
Em biriminin kullanımı W3C tarafından tavsiye edilir.
1em boyutu varsayılan font boyutudur ve 16px’e eşittir.
pikselden em ye dönüşü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 */Yukarıdaki örnekde ki font boyutları bir önceki örnek ile aynıdır fakat tüm tarayıcılarda sorunsuz çalışacak olan em birimi kullanılmıştır.
Yüzde ve em birimlerinin beraber kullanılması
Aşağıdaki örnek çözüm tüm tarayıcılarda sorunsuz çalışır.
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% ayarlıyoruz böylece ilk olarak sitenin varsayılan font boyutunu ayarlamış oluyoruz. daha sonra diğer seçicilerde em kullanarak bu sabit bir font boyutu ayarlamış oluyoruz.
Artık CSS kodumuz sorunsuz olarak tüm tarayıcılarda çalışacaktır. Tüm tarayıcılarda aynı boyutlarda metinlerimiz olacaktır. Zoom ve yeniden boyutlandırma işlemleri bu sayede tüm tarayıcılar tarafından 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:18px verilmiştir.
Bu paragraf için font-size:1em 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 özelliğinin aldığı değerler ve açıklamaları
Değer Açıklama 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 değer varsayılandır. 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 aynı olacak şekilde ayarlar.
