CSS Dersleri 4 - Font Özellikleri ve Açıklama Satırları

Açıklamalar ve Genel Yazı Tipi Özellikleriyle Çalışma

Açıklama satırı

Yorum satırları, CSS kodu yazarken kendimiz ve diğer geliştiriciler için yorum bırakmamızı sağlar. Kodu güncellerken açıklama satırının önemi anlaşılır hale geliyor. Örneğin 5000 satırlık css kodunuz var diyelim, kodu yazdıktan 1 yıl sonra değişiklik yapmak istediğimizde nerede olduğunuzu ve ne yazdığınızı hatırlamamız zor. Bunu yapmak için açıklama satırını okuduk ve bulmak istediğimizi daha kolay bulduk. Tarayıcılar yorum yapılan satırları görmez.

CSS'de yorum satırları /* ile başlar ve */ ile biter.

Örneğin:

* Tekli yorum satırı */
    p {
       color: red;
      }

Genel Yazı Tipi Özellikleri

CSS'de beş genel yazı tipi ailesi vardır:

• Serif yazı tiplerinde her harfin kenarında küçük bir çizgi bulunur. Resmi ve zarif bir his yaratırlar.
• Sans serif yazı tiplerinde temiz çizgiler vardır (küçük vuruşlar eklenmez). Modern minimalist bir görünüm yaratırlar.
• Tüm harfler aynı sabit genişlikte tek aralıklı yazı tipine sahiptir. Mekanik bir görünüm yaratırlar.
• Cursive, insan el yazısını taklit etmek gibidir.
• Fantezi yazı tipleri dekoratif, eğlenceli yazı tipleridir.

Tüm farklı yazı tipi adları, ortak yazı tipi ailelerinden birine aittir.

Not: Bilgisayar ekranlarında sans-serif yazı tiplerinin okunması, serif yazı tiplerinden daha kolay kabul edilir.

CSS içinde font-family kullanarak metnin yazı tipini belirleriz. 

.p1 {
     font-family: "Times New Roman";
    }

    .p2 {
     font-family: Arial;
    }

    .p3 {
     font-family: monospace;
    }

CSS ile font-style yazının stilini değiştirir.

     p.normal {
      font-style: normal;
     }

     p.italic {
      font-style: italic;
     }

     p.oblique {
      font-style: oblique;
     }

CSS ile font-size metinlerin boyutunu belirler.

h1 {
      font-size: 40px;
     }
    
     h2 {
      font-size: 30px;
     }

     p {
      font-size: 14px;
     }

Em ile yazı tipi boyutlarını ayarlamak. Em kullanımı tüm tarayıcılarda uyumlu halde kullanım için önemlidir. 1em = 16 piksel'dir. 

h1 {
      font-size: 2.5em; /* 40px/16=2.5em */
     }

     h2 {
      font-size: 1.875em; /* 30px/16=1.875em */
     }  

     p {
      font-size: 0.875em; /* 14px/16=0.875em */
     }