A font-size tulajdonság

A font-size tulajdonság a szöveg betűméretét állítja be. A tulajdonság értéke bármilyen mértékegység a méretekhez lehet (általában px, em vagy rem) vagy speciális kulcsszavak (ritkán használatosak).

Szintaxis

szelektor {
	font-size: érték;
}

Értékek kulcsszavak formájában

Érték	Leírás
`xx-small`	A legkisebb. Példa: Lorem ipsum dolor sit amet.
`x-small`	Nagyon kicsi. Példa: Lorem ipsum dolor sit amet.
`small`	Kicsi. Példa: Lorem ipsum dolor sit amet.
`medium`	Közepes. Példa: Lorem ipsum dolor sit amet.
`large`	Nagy. Példa: Lorem ipsum dolor sit amet.
`x-large`	Nagyon nagy. Példa: Lorem ipsum dolor sit amet.
`xx-large`	A legnagyobb. Példa: Lorem ipsum dolor sit amet.
`larger`	Nagyobb, mint a szülő betűmérete egy bizonyos értékkel.
`smaller`	Kisebb, mint a szülő betűmérete egy bizonyos értékkel.

Alapértelmezett érték: medium.

Példa

Állítsuk a bekezdések betűméretét 20px-ra:

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

p {
	font-size: 20px;
}

Példa

Ebben a példában a bekezdés mérete 16px, a benne lévő span-é pedig 150%. Ebben az esetben a span betűmérete 150% lesz a saját szülőjéhez (vagyis a bekezdéshez) képest, így a tényleges mérete 16px * 150% = 24px lesz:

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

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

Példa

Ebben a példában a bekezdés mérete 16px, a benne lévő span-é pedig larger. Ebben az esetben a span betűmérete nagyobb lesz, mint a szülőjéé (a bekezdésé):

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

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

Példa

Figyelj arra, hogy a különböző font-family-val rendelkező betűtípusok, ugyanazzal a font-size értékkel is lehet, hogy vizuálisan egyáltalán nem egyformák (a probléma megoldásához lásd a font-size-adjust tulajdonságot).

Az alábbi példában mindkét bekezdés font-size értéke 16px, de különböző a font-family értékük:

<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";
}