Temel Seviye
İleri Seviye
Bir metnin yazı tipi ailesi " font-family " özelliği ile ayarlanır. " font-family " özelliği kullanılırken yedek olarak bir kaç font ailesi daha eklemek tedbir bakımından iyi olur. Eğer tarayıcı ilk font ailesini desteklemiyorsa, bir sonra ki font ailesini kullanır.
Not: Eğer bir font ailesinin adı bir kelimeden fazla ise tırnak işaretleri içine alınmalıdır ve font aileleri virgül ile ayrılmalıdır.
Örnek olarak görelim...
p {Standart Web fontlarını görmek için tıklayınız.
"font-style" özelliği, çoğunlukla metini yatık yapmak için kullanılır.
"font-size" özelliği, metin boyutunu ayarlamak için kullanılır. Metin boyutunu yönetebilmek web tasarımı açısından çok önemlidir. Boyutu piksel olarak " px " , yüzde olarak " % " ya da emphasize (Vurgu) olarak " em " ile belirtilebiliriz. Em boyutu W3C tarafından önerilmektedir çünkü kullanıcı tarayıcıdan metin boyutlandırması yaptığında sayfamızda ki metinlerin boyutu da değişikliğe göre ufalıp büyüyebilecektir ayrıca tarayıcıda zoom yapıldığında da boyutlarımız değişmeyecektir. ( 16px, 1em 'e eşittir. 16px=1em ). Piksel bölü 16 yazılarakta em bulunabilir ( piksel/16=em ).
p {Aşağıda ki örnek CSS kodunu açıklayalım.
body etiketinin font boyutunu yüzde yüz (100%) olarak verdik ama bu ne anlama geliyor? Body etiketinin font boyutunu yüzde yüz olarak vermemiz tarayıcı font boyutunun yüzde yüzünü kullanacağımız anlamına geliyor. Font boyutunu yüzde 80 verseydik tarayıcı font boyutunun yüzde 80'ini kullanmış olacaktık.
Tarayıcıların standart font boyutunun 16 piksel olduğu biliyoruz ve tarayıcı boyutumuzu body etiketi içinde yüzde yüz (100%) verdik. body etiketi içinde bulunan diğer etiketler artık 16px üzerinden işlem yapacak konuma geldi. Örneğin h1 etiketi 16 piksel üzerine 2.5em (40px) ekleyerek fontu boyutlandıracak. Yani h1 etiketi body etiketinden kalıtım almış oluyor, etkilenmiş oluyor.
body {