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