CSS ile Font Belirlemek

Başlarken…

CSS (Cascading Style Sheets – Basamaklı Stil Şablonları)’den önce web geliştiriciler bir metinin renk, büyüklük ve stilini biçimlendirmek için fontetiketini kullanıyorlardı.

<font face=”Arial, Verdana” size=”+1″ color=”red”>Merhaba Dünya!</font>

Bu yöntem metinin görünümünü değiştirmekte etkili olsa da koca bir websiteyi bir dolu font etiketi kullanarak kodlamak hem dosya boyutunu büyütüyor hem de kod tarafında karmaşalara ve hatalara sebep oluyordu.

CSS ile bu tasarımsal ve kodsal sıkıntıları gidermenin pek çok yolu var. Örneğin içeriğimizi bir p elemanının içine yerleştirerek:

<p>Merhaba Dünya!</p>

Sonrasında sayfamızın stilini head etiketi içerisine yerleştireceğimiz styleetiketiyle belirleyebiliriz.

<style type=”text/css” media=”all”>

p {

color: red;

font-size: 12px;

font-family: Arial, Verdana, sans-serif;

}

</style>

Bu şekilde sayfanın yapısal kodları ve görsel biçimleri ayrı ayrı alanlarda tutuluyor ve düzenlenmesi daha kolay bir hal alıyor.

Font Belirlemek

Web sayfamızda metinlere karakter tanımlamak için font-family özelliğini kullanıyoruz:

p {

font-family: Georgia, Times, “Times New Roman”, serif;

}

*Tarayıcı belirttiğimiz font listesindeki ilk fontu sistemde bulamazsa, sırayla diğer fontları arayacaktır, taa ki birini bulana kadar.

*Font ismi boşluk içeriyorsa, tek veya çift tırnak içinde yazılmalıdır.

*Font listesinin sonuna genel bir font ailesi eklenmelidir.

CSS seçilmek üzere beş farklı font ailesi değeri sunar.

Aşağıdaki tabloda bu beş aileden örnekler görebilirsiniz. http://www.w3.org/Style/Examples/007/fonts‘dan alıntıdır.

‘sans-serif’: serifsiz normal fontlar
Helvetica, sans-serif	The Quick Brown Fox Jumps Over The Lazy Dog
Verdana, sans-serif	The Quick Brown Fox Jumps Over The Lazy Dog
Gill Sans, sans-serif	The Quick Brown Fox Jumps Over The Lazy Dog
Avantgarde, sans-serif	The Quick Brown Fox Jumps Over The Lazy Dog
Helvetica Narrow, sans-serif	The Quick Brown Fox Jumps Over The Lazy Dog
sans-serif	The Quick Brown Fox Jumps Over The Lazy Dog
‘serif’: serifli normal fontlar
Times, serif	The Quick Brown Fox Jumps Over The Lazy Dog
Times New Roman, serif	The Quick Brown Fox Jumps Over The Lazy Dog
Palatino, serif	The Quick Brown Fox Jumps Over The Lazy Dog
Bookman, serif	The Quick Brown Fox Jumps Over The Lazy Dog
New Century Schoolbook, serif	The Quick Brown Fox Jumps Over The Lazy Dog
serif	The Quick Brown Fox Jumps Over The Lazy Dog
‘monospace’: aralıklı fontlar
Andale Mono, monospace	The Quick Brown Fox Jumps Over The Lazy Dog
Courier New, monospace	The Quick Brown Fox Jumps Over The Lazy Dog
Courier, monospace	The Quick Brown Fox Jumps Over The Lazy Dog
Lucidatypewriter, monospace	The Quick Brown Fox Jumps Over The Lazy Dog
Fixed, monospace	The Quick Brown Fox Jumps Over The Lazy Dog
monospace	The Quick Brown Fox Jumps Over The Lazy Dog
‘cursive’: elyazısı benzeri fontlar
Comic Sans, Comic Sans MS, cursive	The Quick Brown Fox Jumps Over The Lazy Dog
Zapf Chancery, cursive	The Quick Brown Fox Jumps Over The Lazy Dog
Coronetscript, cursive	The Quick Brown Fox Jumps Over The Lazy Dog
Florence, cursive	The Quick Brown Fox Jumps Over The Lazy Dog
Parkavenue, cursive	The Quick Brown Fox Jumps Over The Lazy Dog
cursive	The Quick Brown Fox Jumps Over The Lazy Dog
‘fantasy’: başlıklar vs. için dekoratif fontlar
Impact, fantasy	The Quick Brown Fox Jumps Over The Lazy Dog
Arnoldboecklin, fantasy	The Quick Brown Fox Jumps Over The Lazy Dog
Oldtown, fantasy	The Quick Brown Fox Jumps Over The Lazy Dog
Blippo, fantasy	The Quick Brown Fox Jumps Over The Lazy Dog
Brushstroke, fantasy	The Quick Brown Fox Jumps Over The Lazy Dog
fantasy	The Quick Brown Fox Jumps Over The Lazy Dog