Omadus font-size

Omadus font-size määrab fondi suuruse. Omaduse väärtuseks võivad olla suvalised mõõtühikud (tavaliselt px, em või rem) või spetsiaalsed võtmesõnad (kasutatakse väga harva).

Süntaks

valija {
	font-size: vaartus;
}

Väärtused võtmesõnadena

Väärtus	Kirjeldus
`xx-small`	Kõige kõige väiksem. Näide: Lorem ipsum dolor sit amet.
`x-small`	Kõige väiksem. Näide: Lorem ipsum dolor sit amet.
`small`	Väike. Näide: Lorem ipsum dolor sit amet.
`medium`	Keskmine. Näide: Lorem ipsum dolor sit amet.
`large`	Suur. Näide: Lorem ipsum dolor sit amet.
`x-large`	Väga suur. Näide: Lorem ipsum dolor sit amet.
`xx-large`	Kõige suurem. Näide: Lorem ipsum dolor sit amet.
`larger`	Suurem kui vanema fondi suurus mingi väärtuse võrra.
`smaller`	Väiksem kui vanema fondi suurus mingi väärtuse võrra.

Vaikeväärtus: medium.

Näide

Määrame lõigetele fondi suuruseks 20px:

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

p {
	font-size: 20px;
}

Näide

Selles näites on lõigu suuruseks määratud 16px ja selle sees oleva span-i suuruseks 150%. Sel juhul on span-i fondi suurus 150% oma vanemast, ehk lõigust, ja selle tegelik suurus on 16px * 150% = 24px:

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

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

Näide

Selles näites on lõigu suuruseks määratud 16px ja selle sees oleva span-i suuruseks larger. Sel juhul on span-i fondi suurus suurem kui selle vanemal (lõigul):

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

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

Näide

Pange tähele, et erineva font-family ja sama font-size-iga fondid võivad visuaalselt olla üpris erineva suurusega (selle probleemi lahendamiseks vaata omadust font-size-adjust).

Allolevas näites on mõlema lõigu font-size määratud 16px-ks, kuid erinev 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";
}