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
lesz:
16px * 150% = 24px
<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";
}
: