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
selektor {
font-size: qiymat;
}
Kalit so‘zlar shaklidagi qiymatlar
| Qiymat | Tavsif |
|---|---|
xx-small |
Eng eng kichik. Misol: Lorem ipsum dolor sit amet. |
x-small |
Eng kichik. Misol: Lorem ipsum dolor sit amet. |
small |
Kichik. Misol: Lorem ipsum dolor sit amet. |
medium |
O‘rta. Misol: Lorem ipsum dolor sit amet. |
large |
Katta. Misol: Lorem ipsum dolor sit amet. |
x-large |
Juda katta. Misol: Lorem ipsum dolor sit amet. |
xx-large |
Eng katta. Misol: Lorem ipsum dolor sit amet. |
larger |
Ota shriftidan ma’lum bir qiymatga katta. |
smaller |
Ota shriftidan ma’lum bir qiymatga kichik. |
Standart qiymat: medium.
Misol
Keling, abzatslarga shrift hajmini
20px ga o‘rnatamiz:
<p>
Lorem ipsum dolor sit amet.
</p>
p {
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
<p>
Lorem <span>ipsum dolor</span> sit amet.
</p>
p {
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:
<p>
Lorem <span>ipsum dolor</span> sit amet.
</p>
p {
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:
<p id="elem1">
Lorem ipsum dolor sit amet.
</p>
<p id="elem2">
Lorem ipsum dolor sit amet.
</p>
#elem1 {
font-size: 16px;
font-family: Arial;
}
#elem2 {
font-size: 16px;
font-family: "Times New Roman";
}
:
