Font-size īpašība

Īpašība font-size nosaka teksta fonta izmēru. Īpašības vērtības ir jebkuras izmēru vienības (parasti px, em vai rem) vai speciāli atslēgvārdi (tiš izmanto ļoti reti).

Sintakse

selektors {
	font-size: vērtība;
}

Vērtības atslēgvārdu veidā

Vērtība	Apraksts
`xx-small`	Vismazākais. Piemērs: Lorem ipsum dolor sit amet.
`x-small`	Ļoti mazs. Piemērs: Lorem ipsum dolor sit amet.
`small`	Mazs. Piemērs: Lorem ipsum dolor sit amet.
`medium`	Vidējs. Piemērs: Lorem ipsum dolor sit amet.
`large`	Liels. Piemērs: Lorem ipsum dolor sit amet.
`x-large`	Ļoti liels. Piemērs: Lorem ipsum dolor sit amet.
`xx-large`	Vislielākais. Piemērs: Lorem ipsum dolor sit amet.
`larger`	Lielāks par vecāka fontu par noteiktu vērtību.
`smaller`	Mazāks par vecāka fontu par noteiktu vērtību.

Noklusējuma vērtība: medium.

Piemērs

Uzstādīsim rindkopām fonta izmēru uz 20px:

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

p {
	font-size: 20px;
}

Piemērs

Šajā piemērā rindkopai ir norādīts izmērs 16px, bet iekšējam span - 150%. Šajā gadījumā span fonta izmērs būs 150% no sava vecāka, t.i., rindkopas, un tā reālais izmērs būs 16px * 150% = 24px:

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

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

Piemērs

Šajā piemērā rindkopai ir norādīts izmērs 16px, bet iekšējam span - larger. Šajā gadījumā span fonta izmērs būs lielāks nekā tā vecākam (rindkopai):

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

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

Piemērs

Ievērojiet, ka fonti ar atšķirīgu font-family un vienādu font-size vizuāli var būt pilnīgi atšķirīga izmēra (šīs problēmas risināšanai skatīt īpašību font-size-adjust).

Zemāk redzamajā piemērā abām rindkopām ir norādīts font-size 16px, bet atšķirīgs 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";
}