CSS Font-weight Özellikleri ve Kullanımı

font-weight yazının kalınlığını (İngilizce karşılığı olarak ağırlığını) belirler. font-weight kullanımında font-family (font ailesinin) özellikleri önemlidir. Font ailesinde bulunmayan bir kalınlığı uygulayamazsınız.

Sayısal değerler alabileceği gibi yazısal değerlerde alır:

/* Standart Değerler (tüm fontlarda kullanılabilirler) */

font-weight: normal;

font-weight: bold;

/* Üst ögeye göre belirlenen değerler (üst öğe değeri css ile sayfadaki tüm fontlara uygulanan değerdir) */

font-weight: lighter;

font-weight: bolder;

/* Rakamsal Değerler */

font-weight: 100;

font-weight: 200;

font-weight: 300;

font-weight: 400;

font-weight: 500;

font-weight: 600;

font-weight: 700;

font-weight: 800;

font-weight: 900;

/* Genel Değerler */

font-weight: inherit;

font-weight: initial;

font-weight: unset;

font-weight Değerler ve Anlamları

normal: Normal yazı tipi ağırlığı. 400 rakamsal değerinin karşığıdır.

bold: Kalın yazı tipi ağırlığı. 700 rakamsal değerinin karşılığıdır.

lighter: Ana değere göre daha ince bir yazı fontu verir.

bolder: Ana değere göre daha kalın bir değer verir.

100, 200, 300, 400, 500, 600, 700, 800,900: Sadece normal ve daha fazlasını sağlayan fontlar için sayısal yazı tipi ağırlıkları.

Örnek kullanım:

HTML Kodları

<p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus aspernatur harum architecto maxime neque quis reprehenderit eum vel, cupiditate dolor magni assumenda dicta ducimus amet ipsum laborum accusantium quos totam!  conversations?'

</p>

<div>Merhaba bu Bir Denemedir<br/>

<span>Merhaba Bu ikinci denemedir</span>

</div>

CSS KODLARI

/* Paragraftaki metni kalın yapar. */

p { font-weight: bold; }

/* Div metnini normalden kalın ancak standart bir kalından daha az kalın olarak ayarlar.*/

div { font-weight: 600; }

/* Metni ana değerden daha ince olacak şekilde ayarlar */

span { font-weight: lighter; }