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

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

Értékek kulcsszavak formájában

Alapértelmezett érték: medium.

Példa

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

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

cssp {
  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:

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

cssp {
  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é):

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

cssp {
  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:

html<p id="elem1">
  Lorem ipsum dolor sit amet.
</p>
<p id="elem2">
  Lorem ipsum dolor sit amet.
</p>

css#elem1 {
  font-size: 16px;
  font-family: Arial;
}
#elem2 {
  font-size: 16px;
  font-family: "Times New Roman";
}

Результат: