Omadus font-size
Omadus font-size määrab
fondi suuruse. Omaduse väärtuseks võivad olla
suvalised mõõtühikud
(tavaliselt px, em
või rem) või spetsiaalsed võtmesõnad
(kasutatakse väga harva).
Süntaks
valija {
font-size: vaartus;
}
Väärtused võtmesõnadena
| Väärtus | Kirjeldus |
|---|---|
xx-small |
Kõige kõige väiksem. Näide: Lorem ipsum dolor sit amet. |
x-small |
Kõige väiksem. Näide: Lorem ipsum dolor sit amet. |
small |
Väike. Näide: Lorem ipsum dolor sit amet. |
medium |
Keskmine. Näide: Lorem ipsum dolor sit amet. |
large |
Suur. Näide: Lorem ipsum dolor sit amet. |
x-large |
Väga suur. Näide: Lorem ipsum dolor sit amet. |
xx-large |
Kõige suurem. Näide: Lorem ipsum dolor sit amet. |
larger |
Suurem kui vanema fondi suurus mingi väärtuse võrra. |
smaller |
Väiksem kui vanema fondi suurus mingi väärtuse võrra. |
Vaikeväärtus: medium.
Näide
Määrame lõigetele fondi suuruseks
20px:
<p>
Lorem ipsum dolor sit amet.
</p>
p {
font-size: 20px;
}
:
Näide
Selles näites on lõigu suuruseks
määratud 16px ja selle sees oleva span-i suuruseks 150%.
Sel juhul on span-i fondi suurus
150% oma vanemast,
ehk lõigust, ja selle tegelik suurus on
:
16px * 150% = 24px
<p>
Lorem <span>ipsum dolor</span> sit amet.
</p>
p {
font-size: 16px;
}
span {
font-size: 150%;
}
:
Näide
Selles näites on lõigu suuruseks
määratud 16px ja selle sees oleva span-i suuruseks larger.
Sel juhul on span-i fondi suurus
suurem kui selle vanemal (lõigul):
<p>
Lorem <span>ipsum dolor</span> sit amet.
</p>
p {
font-size: 16px;
}
span {
font-size: larger;
}
:
Näide
Pange tähele, et erineva
font-family
ja sama font-size-iga fondid võivad visuaalselt olla
üpris erineva suurusega (selle probleemi
lahendamiseks vaata omadust font-size-adjust).
Allolevas näites on mõlema lõigu font-size
määratud 16px-ks, kuid erinev 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";
}
: