Css Font Özellikleri ve Kullanımı

Merhaba Arkadaşlar,
Bu makalede 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.

1 – font-size : 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

2 – font-family : 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.Burda 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

3 – font-weight : 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

4 – font-style : 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

5 – font-variant : 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

Yeni bir makalede görüşmek üzere.

Önceki : Css Dersleri 9 – Outline Kullanımı

Sonraki : Css Dersleri 11 – Liste Özellikleri ve Kullanımı

Leave a Reply

TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +