CSS Yazi Tipi

CSS Font özelliği yazı tipinin türünü, koyuluğunu, boyutunu ayarlamamızı sağlar.

CSS font-family Özelliği

CSS font-family özelliği ile kullanacağınız yazı tipini belirlersiniz.

font-family özelliği içinde birden fazla yazı tipi tanımlamak mümkündür. Eğer tarayıcı ilk fontu desteklemiyorsa bir sonraki fontu kullanmayı dener.

Genelde kullanmak istediğiniz fontu ilk sıraya almanız daha sonrada tarayıcıların desteğinin yüksek olduğu genel fontları yazmanız mantıklı olur.

font-family özelliğine birden fazla font adı yazacaksanız bunları virgül ile ayırarak yazmalısınız.

p {
    font-family: "Times New Roman", Times, serif;
}

CSS font-style Özelliği

CSS font-style özelliği genelde italik (sağa yatık) metinler için kullanılır.

CSS font-style özelliği üç değer alır:

• normal - metin normal görüntülenir
• italic - metin italik görüntülenir.
• oblique - italiğe çok benzer fakat daha az tarayıcı tarafından desteklenir.

p.normal {
    font-style: normal;
}

p.italic {
    font-style: italic;
}

p.oblique {
    font-style: oblique;
}

CSS font-size Özelliği

CSS font-size yazı tipinin boyutunu belirler.

Web tasarımında font boyutu en önemli tasarım unsurlarından biridir.

Sayfada her zaman başlıklar daha büyük font boyutuna sahip olmalıdır. Hiç bir zaman başlık font boyutunu paragraf boyutu ile aynı tutmayın.

Her zaman başlıklar için <h1>-<h6> etiketlerini, paragraflar için <p> etiketini kullanın.

font-size değeri kesin ve göreceli olabilir.

Kesin boyut:

• Metni belirlenen bir boyuta ayarlar.
• Kullanıcılar tarayıcı üzerinden font boyutunu değiştiremezler.
• Kesin boyut çıktının fiziksel boyutu biliniyorsa kullanışlıdır.

Göreceli boyut:

• Sardığı elementin boyutunu göreceli olarak ayarlar
• Kullanıcıların tarayıcı üzerinden font boyutunu değiştirmesine olanak sağlar.

Bu ifadeler sonraki konularda daha iyi anlaşılacaktır.

Font Boyutunu Pixel Olarak Ayarlama

Yazı boyutunu pixel olarak ayarladığınızda metin boyutu üzerinde tam kontrol sağlarız.

Verilen değer tüm ekranlarda aynı boyutta görüntülenir.

h1 {
    font-size: 40px;
}

h2 {
    font-size: 30px;
}

p {
    font-size: 14px;
}

Font Boyutunu Em Olarak Ayarlama

Tarayıcı penceresinden font boyutunun değiştirilebilmesi için pek çok geliştirici em türü ile font boyutu belirler.

em W3C tarafından tercih edilen birimdir.

1em geçerli font boyutuna eşittir. Tarayıcıda geçerli font ölçüsü 16px değerine sahiptir.

1em için varsayılan değer 16px'dir.

pixel - em arası dönüşüm pixel/16=em olarak hesaplanır.

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 */
}

Bu örnekteki em değerleri bir önceki örnekteki pixel değerleri ile aynıdır. Tarayıcı penceresinden fontu büyütmek veya küçültmek em ile mümkündür.

CSS font-weight Özelliği

CSS font-weight özelliği fontun koyuluk veya açıklık değerini belirler.

p.normal {
    font-weight: normal;
}

p.thick {
    font-weight: bold;
}