Css Font Özellikleri

Css font özellikleri bölümünde yazı tipi, yazının kalınlığı, yazı boyutu, yazının eğikliği vb. gibi işlemleri yapmak için css font özellikleri kullanılmaktadır.

Css font özellikleri şunlardır:

  • Font-family
  • Font-size
  • Font-weight
  • Font-style
  • Font

Css Font-family Özelliği

Css font-family özelliği yazı tipini belirlemek için kullanılmaktadır. Css font ailesi isminden de anlaşıldığı üzere bu özelliğe birden fazla değer girilebilmektedir. Birden fazla değer girildiğinde ilk değer tarayıcı tarafından destekleniyorsa ilk yazı tipi gösterilir, desteklemiyorsa sırasıyla destekleyen yazı tipine kadar gösterir.

Css Font Family Özelliği Kullanımı

<style>

.yazitipi{

font-family:Chiller;

}
</style>

Kodu Çalıştır

Örnek:

<style>

.yazitipiailesi{

font-family:Arial,"Comic Sans MS","Times New Roman";

}
</style>

Kodu Çalıştır

Bilgi: Yazı tipi tek olarak belirlenebileceği gibi birden fazla yazı tipide eklenebilmektedir. Eklenen yazı tipleri virgül ile ayrılarak yazılır. Yazı tipi ismi birden fazla kelimeden oluşuyorsa " (çift tırnak) " arasına yazılır.

 

Css Font-size Özelliği

Css font-size özelliği yazı boyutunu belirlemek için kullanılmaktadır. Yazı boyutu pixel, em, % (yüzde) olarak belirlenebilmektedir.

Css Font-size Özelliği Kullanımı

<style>

.yaziboyutu{

font-size:36px;

}
</style>

Kodu Çalıştır

Css Font-weight Özelliği

Css font-weight özelliği yazının kalınlık incelik değerini belirlemek için kullanılmaktadır. Alabildiği değerler:

  • 100(İnce) - 900(Kalın)
  • Bold
  • Normal
  • Lighter

Font-weight 100-900 Değeri Kullanımı

<style>

.yazi100{  font-weight:100;   }
.yazi200{  font-weight:200;   }
.yazi300{  font-weight:300;   }
.yazi400{  font-weight:400;   }
.yazi500{  font-weight:500;   }
.yazi600{  font-weight:600;   }
.yazi700{  font-weight:700;   }
.yazi800{  font-weight:800;   }
.yazi900{  font-weight:900;   }

</style>

Kodu Çalıştır

Font-weight Bold Değeri Kullanımı

<style>

p{

font-weight:bold;

}
</style>

Kodu Çalıştır

Font-weight Normal Değeri Kullanımı

<style>

p{

font-weight:normal;

}
</style>

Kodu Çalıştır

Font-weight Lighter Değeri Kullanımı

<style>

p{

font-weight:lighter;

}
</style>

Kodu Çalıştır

Css Font-style Özelliği

Css font-style özelliği yazının eğik, az eğik veya normal olmasını belirlemek için kullanılmaktadır. Css font-style özelliği alabildiği değerler:

  • Normal
  • İtalic
  • Oblique

Font-style Normal Değeri Kullanımı

<style>

h1{

font-style:normal;

}
</style>

Kodu Çalıştır

Font-style İtalic Değeri Kullanımı

<style>

h1{

font-style:italic;

}
</style>

Kodu Çalıştır

Font-style Oblique Değeri Kullanımı

<style>

h1{

font-style:oblique;

}
</style>

Kodu Çalıştır

Css Font Özelliği

Css font özelliği, tüm font özelliklerinin tek bir özellik altında toplamak yani kısaltmak için kullanılır. Font özelliği ile yazı tipi, yazı boyutu, yazının kalınlığı inceliği ve eğikliğini tek özellik altında belirlemek için kullanılmaktadır.

Css font özelliğini kullanırken aşağıdaki sıralama üzerinden kullanılmaktadır.

Sıralama :

  1. Font-style
  2. Font-weight
  3. Font-size / line-height
  4. Font-family

yukarıdaki sıraya göre kullanılmaktadır.

Css Font Özelliği Kullanımı:

<style>

p{

font: oblique bold 36px/10px Chiller;

}

.uzunhali{

font-style:oblique;
font-weight:bold;
font-size:36px;
line-height:10px;
font-family: Chiller;

}

</style>

Kodu Çalıştır