Css Font Özellikleri ve Kullanımı

Bu yazımızda Css’te font özelliklerini ve bunları nasıl kullanabileceğimizi öğreneceğiz. Font özellikleri ile yazının boyutunu, tipini, kalınlığını ve stilini düzenliyebiliriz.

Şimdi tek tek bu özellikleri uygulamalı bir şekilde inceleyelim.

Bu özellik ile yazılara istediğimiz boyutları verebiliriz. Genelde değerleri px veya em türünden veriyoruz. Normalde tarayıcılar varsayılan olarak yazı boyutunu 16px olarak uygularlar.

Burada 1em demek, varsayılan boyut yani 16px olarak hesaplanır.

2em = 16px * 2 = 32px

3.5em = 16px * 3.5 = 56px vb..

Örneğimizde 6 adet <p> etiketi tanımlayıp font-size değerlerini px, em olarak verelim ve tarayıcıdaki durumlarını inceleyelim.

css-dersleri-font-size-kullanimi

CSS FONT FAMİLY ÖZELLİĞİ

Bu özellik ile yazıların tipini yani hangi font ailesinden olmasını istiyorsak onu ayarlayabiliriz.

Değer olarak sadece bir yazı tipi verebildiğimiz gibi birden fazla değerde verebiliriz. Çünkü verdiğimiz ilk değeri tarayıcı desteklemiyorsa bir sonraki verdiğimiz değeri uygulayacaktır.

Örneğin <p> etiketine 3 değer vermek istersek,

şeklinde verebiliriz.

Burada dikkat etmemiz gereken bir konu da, eğer vereceğimiz değer tek kelime ise direk yazabiliriz ama birden fazla kelimeden oluşuyorsa çift tırnak arasında yazmamız gerekiyor.

Örneğimizde 3 adet <p> etiketi tanımlayıp farklı font-family değerlerini vererek tarayıcıdaki durumlarını inceleyelim.

css-dersleri-font-family-kullanimi

CSS FONT WEİGHT ÖZELLİĞİ

Bu özellik ile yazıların kalınlık incelik durumlarını ayarlayabiliriz.

font-weight özelliğine şu değerleri verebiliriz.

      ► bold

      ► bolder

      ► lighter

      ► normal

      ► 100’den 900’e kadar 100’ün katları olacak şekildede verilebilir. 900 en kalını iken, 100’e doğru incelir ve 100’de en ince halini alır.  

Örneğimizde 6 adet <p> etiketi tanımlayıp font-weight değerlerini vererek tarayıcıdaki durumlarını inceleyelim.

css-dersleri-font-weight-kullanimi

CSS FONT STYLE ÖZELLİĞİ

Bu özellik ile yazıların italik olmasını ayarlayabiliriz.

font-style özelliğine şu değerleri verebiliriz.

      ► italic

      ► normal

      ► oblique (italic değerine çok benzer ama daha az tarayıcı tarafından desteklenir.)

Örneğimizde 3 adet <p> etiketi tanımlayıp font-weight değerlerini vererek tarayıcıdaki durumlarını inceleyelim.

css-dersleri-font-style-kullanimi

CSS FONT VARİANT ÖZELLİĞİ

Bu özellik ile yazılarda küçük harfleri, büyük harflere dönüştürebiliriz.

Burda şuna dikkat etmemiz gerekiyor. Eğer yazıda hepsi küçük harf ise dönüştürdüğümüzde hepsi aynı boyutta büyük harfe dönüşecektir. Eğer yazıda hem büyük hem küçük harfler varsa, dönüştürdüğümüzde yine hepsi büyük harf olacaktır ama önceden zaten büyük harf olanlar yeni dönüştürülenlerden biraz daha büyük olacaktır.

font-variant özelliğine şu değerleri verebiliriz.

      ► small-caps (Küçük harfleri büyük harflere dönüştürür.)

      ► normal  

Biraz karışık gelmiş olabilir ama örneği incelediğinizde daha anlaşılır olacaktır.

Örneğimizde 3 adet <p> etiketi tanımlayıp font-variant değerlerini vererek tarayıcıdaki durumlarını inceleyelim.

css-dersleri-font-variant-kullanimi

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.

Yorum Yazın