Fontlar

font-family

Bu özellik ile bir elemanın içerisindeki yazıların hangi fontla yazılacağı belirtilir. Buraya iki farklı değer girilebilir. Birisi doğrudan font adıdır. Örneğin Times New Roman değeri girilirse doğrudan bu fontun kullanılması istenmiş olur. Bir başka girilebilecek değer de fontların bir araya gelmesiyle oluşan bir font ailesidir. Örnek olarak Serif  font ailesi Times New Roman, Georgia gibi fontları içerir. Eğer girilecek bir değer birden fazla kelimeden oluşuyorsa tırnak içerisinde yazılmalıdır.

Bu özellik kullanılırken tedbir amaçlı olarak birden fazla değer girilmelidir. Değerler birbirinden virgül ile ayrılır. Tarayıcı ilk olarak ilk girilen değerde görüntülemeyi dener, olmazsa bir sonrakini dener ve bu böyle devam eder. Genellikle kullanılan yöntem girilecek değere istenen fontlarla başlanıp bir genel font ailesi ile bitirmektir. Bu durumda hiçbir font tarayıcı tarafından kullanılmazsa belirtilen genel dil ailesinden benzer bir fontta görüntüleme yapılır.

<!DOCTYPE html>
<html>
<head>
<title>CSS Fontlar</title>
<meta charset="UTF-8">
<style>
p.ornek1{
font-family:Arial, Helvetica, sans-serif;
}
p.ornek2{
font-family:"Times New Roman", Times, serif;
}
p.ornek3{
font-family:"Courier New", Courier, monospace;
}
</style>
</head>
<body>
    <p class="ornek1"> Örnek Paragraf 1</p><br/>
    <p class="ornek2"> Örnek Paragraf 2</p><br/>
    <p class="ornek3"> Örnek Paragraf 3</p><br/>
</body>
</html>

Bu özellikle yapılan biçimlendirmeler alt elemanlara da aktarılır.


font-size

Bu özelliğin karşısına değer olarak uzunluk ya da yüzdeli değer girilir ve bu değer font büyüklüğünü ayarlar. Yüzdeli değer girilmesi durumunda baz alınacak değer elemanın üst elemanındaki font büyüklüğüdür. Bunların dışında tanımlı bazı kelimeler de değer olarak girilebilir. Bu kelimeler xx-small, x-small, small, medium, large, x-large ve xx-large olmak üzere yedi tanedir ve manaları sırasıyla çok çok küçük, çok küçük, küçük, orta, büyük, çok büyük ve çok çok büyüktür. Varsayılan değer 16px değerine karşılık gelen medium değeridir. Bu elemanla yapılan biçimlendirmeler alt elemanlara da aktarılır.

<!DOCTYPE html>
<html>
<head>
<title>CSS Fontlar</title>
<meta charset="UTF-8">
<style>
p.ornek1{
font-size:medium;
}
p.ornek2{
font-size:xx-small;
}
p.ornek3{
font-size:xx-large;
}
p.ornek4{
font-size:8px;
}
p.ornek5{
font-size:32px;
}
</style>
</head>
<body>
    <p class="ornek1"> Örnek Paragraf 1</p><br/>
    <p class="ornek2"> Örnek Paragraf 2</p><br/>
    <p class="ornek3"> Örnek Paragraf 3</p><br/>
    <p class="ornek4"> Örnek Paragraf 4</p><br/>
    <p class="ornek5"> Örnek Paragraf 5</p><br/>
</body>
</html>

font-size-adjust

Bu özelliğin karşısına girilen sayı küçük harfin mevcut font büyüklüğüne oranı olur. Örneğin küçük harf / büyük harf oranı 0,45 olan bir font için bu özellik 0.6 değeri ile kullanılırsa bu fontun küçük harfleri font büyüklüğünün 60%'ı kadar olacaktır, bu nedenle yazı daha büyük görünecektir. Bu özelliğin kullanımı özellikle küçük yazılarda alternatif fontun kullanımında yararlıdır. Böyle durumlarda bu özellik ilk seçenek olan fontun küçük harf / büyük harf oranına eşitlenebilir. Böylece alternatif bir fontun kullanılması durumunda küçük harf boyutu ilk seçenek olan fontun küçük harf boyutu ile aynı olacaktır.  Bu da alternatif fontun kullanılması durumunda okumada zorluk oluşmasını önleyecektir. Bu özellikle yapılan biçimlendirmeler alt elemanı da etkiler. Yazının yazıldığı an itibarı ile bu özellik sadece Mozilla Firefox tarafından desteklenmektedir.

<!DOCTYPE html>
<html>
<head>
<title>CSS Fontlar</title>
<meta charset="UTF-8">
<style>
p{
    font-family: Verdana;
    font-size-adjust: 0.55;
}
p.ornek{
    font-family: "Times New Roman";
}
div{
    font-family: "Times New Roman";
}
</style>
</head>
<body>
    <p> Örnek Paragraf 1</p><br/>
    <p class="ornek"> Örnek Paragraf 2</p><br/>
    <div"> Örnek Paragraf 3</div><br/>
</body>
</html>

Yukarıdaki örnekte paragraflar için küçk harf/büyük harf oranı 0.55 olarak verilmiştir. Bu Verdana fontunun varsayılan değeridir. İkinci paragraf Times New Roman fontunu kullanmaktadır. Bu font için küçük harf / büyük harf boyutu 0.45'tir. Fakat küçük harfinin boyutu font boyutunun 55%'i olacak şekilde ayarlanmıştır. Bu nedenle bu paragraf normalde olması gerekenden büyük görüntülenecektir. Üçüncü paragraf ise <div> etiketleri arasına yazılmıştır ve yapılan tek biçimlendirme fontun Times New Roman olacağıdır. Bu nedenle buradaki yazı normal boyutunda görüntülenecektir.


font-stretch

Bu özellikle yazıların genişlikleri belirlenebilir. Daha sıkışıktan daha genişe doğru girilebilecek değerler şu şekilde tanımlanmıştır: ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded. Bu özellikle yapılan biçimlendirmelerin alt elemanlara aktarılacağı da tanımlanmıştır. Fakat bu özellik yazının yazıldığı an itibarı ile hiçbir tarayıcı tarafından desteklenmemektedir.


font-style

Bu özellik ile fontun yazılış şekli biçimlendirilebilir. Varsayılan normaldir ve fontu varsayılan şekilde dik olarak görüntüler. Girilebilecek bir başka değer olan italic yazının italik yazılmasını sağlar. oblique değeri ise yazının eğik yazılmasını sağlar. oblique ile italic değerlerinin farkı oblique değeri yazıyı sadece eğerken italic değerinde harflerin şeklinde de değişiklik olabilmesidir. Birçok fontta iki değer de aynı sonucu verir. Bu özellik ile yapılan biçimlendirmeler alt elemanlara da aktarılır.

<!DOCTYPE html>
<html>
<head>
<title>CSS Fontlar</title>
<meta charset="UTF-8">
<style>
p.ornek1{
    font-style: normal;
}
p.ornek2{
    font-style: italic;
}
</style>
</head>
<body>
    <p class="ornek1"> Örnek Paragraf 1</p><br/>
    <p class="ornek2"> Örnek Paragraf 2</p><br/>
</body>
</html>

font-weight

Bu özellikle fontların koyuluğu ayarlanabilir. Girilebilecek değer olarak dört kelime vardır. Bunlar normal, bold, bolder ve lighter değerleridir. Bu değerler sırasıyla normal, kalın, daha koyu ve daha açık yazdırmaya yarar. Bunun dışında 100 ile 900 arasındaki yüzün katları olan sayılar da değer olarak girilebilir. Sayı yükseldikçe kalınlık değişecektir.

normal değeri 400'e, bold değeri 700'e karşılık gelmektedir. bolder değeri kullanılırsa elemandaki yazıların koyuluğu üst elemanın koyuluğundan bir ton daha fazla olur. lighter değeri kullanıldığında ise yazılar üst elemandaki yazılardan bir ton daha açık olur.

Birçok font için tanımlanan koyuluk seviyesi az sayıdadır. Bu nedenle bazı sayıların karşılığı yoktur. Böyle durumlarda tarayıcı tanımlı en yakın koyuluk seviyesini kullanır, bu da farklı koyuluk değerlerinin aynı çıktıyı vermesine sebep olabilir. Bu özellikle yapılan biçimlendirmeler alt elemanları da etkiler.

<!DOCTYPE html>
<html>
<head>
<title>CSS Fontlar</title>
<meta charset="UTF-8">
<style>
p.ornek1{
    font-weight: normal;
}
p.ornek2{
    font-weight: bold;
}
</style>
</head>
<body>
    <p class="ornek1"> Normal Yazı</p><br/>
    <p class="ornek2"> Kalın Yazı</p><br/>
</body>
</html>

font-variant

Bu özellik kullanılarak küçük harflerin boyut olarak küçük ama şekil olarak büyük harf şeklinde yazılması sağlanır. Varsayılan değer olan normal değeri herhangi bir değişikliğe sebep olmaz. Asıl işlevsel olan değer ise small-caps değeridir. Bu özellikle yapılan biçimlendirmeler alt elemanlara da aktarılır.

<!DOCTYPE html>
<html>
<head>
<title>CSS Fontlar</title>
<meta charset="UTF-8">
<style>
p.ornek1{
    font-variant: normal;
}
p.ornek2{
    font-variant: small-caps;
}
</style>
</head>
<body>
    <p class="ornek1"> Örnek Paragraf 1</p><br/>
    <p class="ornek2"> Örnek Paragraf 2</p><br/>
</body>
</html>

font

Bu özellik kullanılarak fontla ilgili birden çok biçimlendirme tek seferde yapılabilir. Kullanılacak format şu şekildedir:

font: "font-style değeri" "font-variant değeri" "font-weight değeri" "font-size / line-height değeri" "font-family değeri"

font-size ve font-family değerlerinin girilmesi zorunludur. Diğer değerler girilmezse varsayılan değerler kullanılır.

<!DOCTYPE html>
<html>
<head>
<title>CSS Fontlar</title>
<meta charset="UTF-8">
<style>
p.ornek1{
    font: italic small-caps bold 16px/20px "Times New Roman";
}
p.ornek2{
    font: 10px Arial;
}
</style>
</head>
<body>
    <p class="ornek1"> Örnek Paragraf 1</p><br/>
    <p class="ornek2"> Örnek Paragraf 2</p><br/>
</body>
</html>

Girilebilecek birtakım ön tanımlı değerler vardır. Bu değerler girildiğinde değere karşılık tarayıcının tanımladığı biçimlendirme kullanılır. Bunlar resim, tablo gibi elemanlar için kullanılan başlıkların biçimlendirmesini almak için caption, ikon etiketlerinde kullanılan biçimlendirmeyi almak için icon, açılır menülerde kullanılan biçimlendirmeyi almak için menu, diyalog pencerelerinde kullanılan biçimlendirmeyi almak için message-box, caption ile alınan biçimlendirmenin daha küçük boyutlusunu almak için small-caption ve durum çubuğunda kullanılan biçimlendirmeyi almak için status-bar olmak üzere altı tanedir.

Bu özellikle yapılan biçimlendirmeler alt elemanlara da aktarılır.


@font-face

CSS3 ile kullanıcı tarafından da font isimleri tanımlanabilir ve bunlar daha sonra kullanılabilir. Bunun için kullanılacak fontun adresi belirtilmeli ve fonta isim verilmelidir. Bu aşağıdaki formatla yapılır.

@font-face{
    font-family: font_ismi;
    src: url("font_adresi");
}

Daha sonra font-family özelliği kullanılarak tanımlanan font kullanılabilir. Font için kalınlık, stil vs. gibi özellikler de @font-face içinde tanımlanabilir. Bu biçimlendirme tanımlanan font için standart biçimlendirme olacaktır.

<!DOCTYPE html>
<html>
<head>
<title>CSS Fontlar</title>
<meta charset="UTF-8">
<style>
@font-face{
    font-family: denemeFontu;
    src: url("https://dl.dropboxusercontent.com/u/53524685/pricedow.ttf");
}
p.ornek1{
    font-family: denemeFontu;
}
</style>
</head>
<body>
    <p class="ornek1"> Örnek Paragraf 1</p><br/>
    <p class="ornek2"> Örnek Paragraf 2</p><br/>
</body>
</html>