css font özelliği, metnin tüm yazı tipi özelliklerini belirler. Bu özelliği kullanırken font boyutunu ve ailesini belirtmemiz gereklidir. Yoksa sonuçta değişiklik görülmez. Sıralama da önemlidir. Kullanım şeklinde gösterildiği gibi sıralamaya uyulmalıdır. Yoksa yine sonuçta istediğimiz sonucu elde edemeyiz.
Kullanım Şekli :
font : font-style font-variant font-weight font-size/line-height font-family;
font : italic small-caps bold 24px “Monotype Corsiva”, cursive;
Not : Parametreler arasında virgul koyulmaz. Sadece font ailesinde varsa o özellikten kaynaklı virgül olur.
Aldığı parametreler:
font-style : Yazı tipi stilini belirler.
font-variant : Küçük harflerin büyük harf olarak gösterilmesi.
font-weight : Yazı tipi kalınılığını belirler.
font-size : Yazı tipi boyutunu belirler.
line-height : Satırların yüksekliğini belirler.
font-family : Yazı tipi ailesini seçmek için.
inherit : Bir üstteki elementten miras alır.
initial : Varsayılan değere çevirir.
Örnek :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div { margin-bottom: 10px; }
.one { font: 32px 'Courier New', Courier, monospace;}
.two { font:italic bold 24px Arial, Helvetica, sans-serif; }
.three { font:italic small-caps bold 24px "Monotype Corsiva", cursive; }
</style>
<body>
<div class="one">Tasarım ve Yazılım...</div>
<div class="two">Tasarım ve Yazılım...</div>
<div class="three">Tasarım ve Yazılım...</div>
</body>
</html>Html Çıktısı:
Genelde css font özelliği ile bütün özelliklere bir arada değer verebiliriz. Yukarıdaki örneğimizde olduğu gibi. İstersek font size, font family, font style, font weight, font variant ve line height özelliklerine ayrı yarı değerler vererek kullanabiliriz. Sizin tercihinize kalmıştır. Bu özelikleri daha önceki yazılarımızda ayrı ayrı örneklerle anlatmıştık. O yazılarımıza da bakabilirsiniz.
Başka bir yazımızda görüşmek üzere…
