Eienskap font-size

Die eienskap font-size stel die grootte van die teks se lettertipe in. Die waarde van die eienskap is enige eenhede vir groottes (gewoonlik is dit px, em of rem) of spesiale sleutelwoorde (word baie selde gebruik).

Sintaksis

selektor {
	font-size: waarde;
}

Waardes in die vorm van sleutelwoorde

Waarde	Beskrywing
`xx-small`	Die aller-, allerkleinste. Voorbeeld: Lorem ipsum dolor sit amet.
`x-small`	Die allerkleinste. Voorbeeld: Lorem ipsum dolor sit amet.
`small`	Klein. Voorbeeld: Lorem ipsum dolor sit amet.
`medium`	Gemiddeld. Voorbeeld: Lorem ipsum dolor sit amet.
`large`	Groot. Voorbeeld: Lorem ipsum dolor sit amet.
`x-large`	Baie groot. Voorbeeld: Lorem ipsum dolor sit amet.
`xx-large`	Die allergrootste. Voorbeeld: Lorem ipsum dolor sit amet.
`larger`	Groter as die lettertipe van die ouer met 'n sekere waarde.
`smaller`	Kleiner as die lettertipe van die ouer met 'n sekere waarde.

Verstekwaarde: medium.

Voorbeeld

Laat ons die lettergrootte van paragrawe op 20px stel:

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

p {
	font-size: 20px;
}

Voorbeeld

In hierdie voorbeeld is die grootte vir die paragraaf op 16px gestel, en vir die span binne dit - op 150%. In hierdie geval sal die lettergrootte vir die span 150% van sy ouer wees, dit wil sê die paragraaf, en sy werklike grootte sal 16px * 150% = 24px wees:

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

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

Voorbeeld

In hierdie voorbeeld is die grootte vir die paragraaf op 16px gestel, en vir die span binne dit - op larger. In hierdie geval sal die lettergrootte vir die span groter wees as dié van sy ouer (die paragraaf):

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

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

Voorbeeld

Let daarop dat lettertipes met verskillende font-family en dieselfde font-size visueel heeltemal nie van dieselfde grootte kan wees nie (vir die oplossing van hierdie probleem, sien die eienskap font-size-adjust).

In die voorbeeld hieronder is vir albei paragrawe 'n font-size van 16px gestel, maar verschillende 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";
}