Egenskaben font-size

Egenskaben font-size indstiller skriftstørrelsen på teksten. Værdien for egenskaben er enhver enhed for størrelser (som regel px, em eller rem) eller specielle nøgleord (bruges yderst sjældent).

Syntaks

selektor {
	font-size: værdi;
}

Værdier som nøgleord

Værdi	Beskrivelse
`xx-small`	Allermindst. Eksempel: Lorem ipsum dolor sit amet.
`x-small`	Allermindst. Eksempel: Lorem ipsum dolor sit amet.
`small`	Lille. Eksempel: Lorem ipsum dolor sit amet.
`medium`	Medium. Eksempel: Lorem ipsum dolor sit amet.
`large`	Stor. Eksempel: Lorem ipsum dolor sit amet.
`x-large`	Meget stor. Eksempel: Lorem ipsum dolor sit amet.
`xx-large`	Allerstørst. Eksempel: Lorem ipsum dolor sit amet.
`larger`	Større end forældreelementets skriftstørrelse med en vis værdi.
`smaller`	Mindre end forældreelementets skriftstørrelse med en vis værdi.

Standardværdi: medium.

Eksempel

Lad os indstille afsnittenes skriftstørrelse til 20px:

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

p {
	font-size: 20px;
}

Eksempel

I dette eksempel er størrelsen for afsnittet sat til 16px, og for span inde i det - til 150%. I dette tilfælde vil skriftstørrelsen for span være 150% af sin forælder, dvs. afsnittet, og dens faktiske størrelse vil være 16px * 150% = 24px:

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

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

Eksempel

I dette eksempel er størrelsen for afsnittet sat til 16px, og for span inde i det - til larger. I dette tilfælde vil skriftstørrelsen for span være større end for dens forælder (afsnittet):

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

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

Eksempel

Vær opmærksom på, at skrifttyper med forskellig font-family og samme font-size visuelt kan være af helt forskellig størrelse (for at løse dette problem, se egenskaben font-size-adjust).

I eksemplet nedenfor er font-size for begge afsnit sat til 16px, men med forskellig 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";
}