font-size Özelliği

font-size özelliği, metnin yazı tipi boyutunu ayarlar. Özelliğin değeri olarak herhangi bir boyut birimi (genellikle px, em veya rem) veya özel anahtar kelimeler (çok nadiren kullanılır) kullanılır.

Sözdizimi

cssseçici {
  font-size: değer;
}

Anahtar Kelime Olarak Değerler

Varsayılan değer: medium.

Örnek

Paragrafların yazı tipi boyutunu 20px olarak ayarlayalım:

html<p>
  Lorem ipsum dolor sit amet.
</p>

cssp {
  font-size: 20px;
}

Результат:

Örnek

Bu örnekte paragrafın boyutu 16px, içindeki span'in boyutu ise 150% olarak ayarlanmıştır. Bu durumda span'in yazı tipi boyutu kendi ebeveyninin (yani paragrafın) 150%'si kadar olacak ve gerçek boyutu 16px * 150% = 24px olacaktır:

html<p>
  Lorem <span>ipsum dolor</span> sit amet.
</p>

cssp {
  font-size: 16px;
}
span {
  font-size: 150%;
}

Результат:

Örnek

Bu örnekte paragrafın boyutu 16px, içindeki span'in boyutu ise larger olarak ayarlanmıştır. Bu durumda span'in yazı tipi boyutu eşdeğerinden (paragraftan) daha büyük olacaktır:

html<p>
  Lorem <span>ipsum dolor</span> sit amet.
</p>

cssp {
  font-size: 16px;
}
span {
  font-size: larger;
}

Результат:

Örnek

Farklı font-family'ye sahip yazı tiplerinin aynı font-size ile bile görsel olarak tamamen aynı boyutta olmayabileceğine dikkat edin (bu sorunu çözmek için font-size-adjust özelliğine bakın).

Aşağıdaki örnekte her iki paragrafa da font-size 16px olarak ayarlanmış, ancak farklı font-family verilmiştir:

html<p id="elem1">
  Lorem ipsum dolor sit amet.
</p>
<p id="elem2">
  Lorem ipsum dolor sit amet.
</p>

css#elem1 {
  font-size: 16px;
  font-family: Arial;
}
#elem2 {
  font-size: 16px;
  font-family: "Times New Roman";
}

Результат: