Хосияти font-size

Хосияти font-size андозаи ҳарфи матнро муқаррар мекунад. Қимати хосият ҳар гуна воҳидҳои барои андозаҳо мебошад (одатан, инҳо px, em ё rem мебошанд) ё калимаҳои махсуси калидӣ (надир истифода мешаванд).

Синтаксис

интихобкунанда {
	font-size: қимат;
}

Қиматҳо ба сурати калимаҳои калидӣ

Қимат	Тавсиф
`xx-small`	Хеле хеле хурд. Намуна: Lorem ipsum dolor sit amet.
`x-small`	Хеле хурд. Намуна: Lorem ipsum dolor sit amet.
`small`	Хурд. Намуна: Lorem ipsum dolor sit amet.
`medium`	Миёна. Намуна: Lorem ipsum dolor sit amet.
`large`	Калон. Намуна: Lorem ipsum dolor sit amet.
`x-large`	Хеле калон. Намуна: Lorem ipsum dolor sit amet.
`xx-large`	Хеле бузург. Намуна: Lorem ipsum dolor sit amet.
`larger`	Аз ҳарфи волидайн калонтар баъзе қимат.
`smaller`	Аз ҳарфи волидайн хурдтар баъзе қимат.

Қимати пешфарз: medium.

Намуна

Биёед барои абзасҳо андозаи ҳарфро ба 20px муқаррар кунем:

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

p {
	font-size: 20px;
}

Намуна

Дар ин намуна барои абзас андозаи 16px, ва барои span дар дохили он - 150% муқаррар шудааст. Дар ин ҳолат андозаи ҳарф барои span 150% аз волидаини худ, яъне абзас хоҳад буд, ва андозаи воқеии он 16px * 150% = 24px хоҳад буд:

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

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

Намуна

Дар ин намуна барои абзас андозаи 16px, ва барои span дар дохили он - larger муқаррар шудааст. Дар ин ҳолат андозаи ҳарф барои span аз волидаини худ (абзас) калонтар хоҳад буд:

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

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

Намуна

Диққат кунед, ки ҳарфҳо бо font-family ҳархела ва font-size якхела аз назари андоза комилан якхела намебошанд (барои ҳалли ин мушкилот хосияти font-size-adjust-ро бубинед).

Дар намунаи зер ба ҳарду абзас font-size 16px муқаррар шудааст, аммо font-family ҳархела:

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