Уласцівасць 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";
}