Savybė font-size

Savybė font-size nustato teksto šrifto dydį. Savybės reikšmė gali būti bet kuris dydžio vienetas (dažniausiai px, em arba rem) arba specialūs raktažodžiai (naudojami labai retai).

Sintaksė

selektorius {
	font-size: reikšmė;
}

Reikšmės raktažodžių pavidalu

Reikšmė	Aprašas
`xx-small`	Patys mažiausias. Pavyzdys: Lorem ipsum dolor sit amet.
`x-small`	Labai mažas. Pavyzdys: Lorem ipsum dolor sit amet.
`small`	Mažas. Pavyzdys: Lorem ipsum dolor sit amet.
`medium`	Vidutinis. Pavyzdys: Lorem ipsum dolor sit amet.
`large`	Didelis. Pavyzdys: Lorem ipsum dolor sit amet.
`x-large`	Labai didelis. Pavyzdys: Lorem ipsum dolor sit amet.
`xx-large`	Patys didžiausias. Pavyzdys: Lorem ipsum dolor sit amet.
`larger`	Už tėvinio elemento šriftą didesnis tam tikra reikšme.
`smaller`	Už tėvinio elemento šriftą mažesnis tam tikra reikšme.

Numatytoji reikšmė: medium.

Pavyzdys

Nustatykime pastraipų šrifto dydį 20px:

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

p {
	font-size: 20px;
}

Pavyzdys

Šiame pavyzdyje pastraipai nustatytas dydis 16px, o jos viduje esančiam elementui span - 150%. Šiuo atveju elemento span šrifto dydis bus 150% nuo savo tėvinio elemento, t.y. pastraipos, ir jo faktinis dydis bus 16px * 150% = 24px:

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

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

Pavyzdys

Šiame pavyzdyje pastraipai nustatytas dydis 16px, o jos viduje esančiam span - larger. Šiuo atveju span šrifto dydis bus didesnis nei jo tėvinio elemento (pastraipos):

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

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

Pavyzdys

Atkreipkite dėmesį, kad šriftai su skirtingomis font-family ir vienodu font-size vizualiai gali būti visiškai skirtingo dydžio (šiai problemai spręsti žiūrėkite savybę font-size-adjust).

Žemiau pateiktame pavyzdyje abiem pastraipoms nustatytas font-size 16px, bet skirtingos 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";
}