Font-size xususiyati

font-size xususiyati matn shriftining hajmini belgilaydi. Xususiyat qiymati sifatida istalgan o‘lchov birliklari (odatda, px, em yoki rem) yoki maxsus kalit so‘zlar (kam qo‘llaniladi) ishlatiladi.

Sintaksis

cssselektor {
  font-size: qiymat;
}

Kalit so‘zlar shaklidagi qiymatlar

Standart qiymat: medium.

Misol

Keling, abzatslarga shrift hajmini 20px ga o‘rnatamiz:

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

cssp {
  font-size: 20px;
}

Результат:

Misol

Ushbu misolda abzats uchun hajm 16px, uning ichidagi span uchun esa - 150% ga belgilangan. Bunda span uchun shrift hajmi o‘z otasining, ya’ni abzatsning 150% ini tashkil qiladi, va uning haqiqiy hajmi 16px * 150% = 24px bo‘ladi:

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

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

Результат:

Misol

Ushbu misolda abzats uchun hajm 16px, uning ichidagi span uchun esa - larger ga belgilangan. Bunda span uchun shrift hajmi uning otasinikiga (abzatsga) qaraganda katta bo‘ladi:

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

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

Результат:

Misol

Shuni e’tiboringizga qaratmangki, har xil font-family va bir xil font-size ga ega bo‘lgan shriftlar vizual jihatdan butunlay boshqacha hajmda bo‘lishi mumkin (bu muammoni hal qilish uchun font-size-adjust xususiyatiga qarang).

Quyidagi misolda ikkala abzatsga ham font-size 16px ga, lekin har xil font-family belgilangan:

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";
}

Результат: