Font-size-ominaisuus
Ominaisuus font-size asettaa tekstin fontin
koon. Ominaisuuden arvona käytetään mitä tahansa
koko-yksiköitä
(yleensä nämä ovat px, em
tai rem) tai erityisiä avainsanoja
(joita käytetään erittäin harvoin).
Syntaksi
valitsin {
font-size: arvo;
}
Arvot avainsanoina
| Arvo | Kuvaus |
|---|---|
xx-small |
Pienin mahdollinen. Esimerkki: Lorem ipsum dolor sit amet. |
x-small |
Erittäin pieni. Esimerkki: Lorem ipsum dolor sit amet. |
small |
Pieni. Esimerkki: Lorem ipsum dolor sit amet. |
medium |
Keskikokoinen. Esimerkki: Lorem ipsum dolor sit amet. |
large |
Suuri. Esimerkki: Lorem ipsum dolor sit amet. |
x-large |
Erittäin suuri. Esimerkki: Lorem ipsum dolor sit amet. |
xx-large |
Suurin mahdollinen. Esimerkki: Lorem ipsum dolor sit amet. |
larger |
Isompi kuin vanhemman fontti tietyn arvon verran. |
smaller |
Pienempi kuin vanhemman fontti tietyn arvon verran. |
Oletusarvo: medium.
Esimerkki
Asetetaan kappaleille fontin kooksi
20px:
<p>
Lorem ipsum dolor sit amet.
</p>
p {
font-size: 20px;
}
:
Esimerkki
Tässä esimerkissä kappaleelle on asetettu koko
16px, ja sen sisällä olevalle span-elementille - 150%.
Tässä tapauksessa span-elementin fontin koko on
150% sen vanhemmasta,
eli kappaleesta, ja sen todellinen koko on
:
16px * 150% = 24px
<p>
Lorem <span>ipsum dolor</span> sit amet.
</p>
p {
font-size: 16px;
}
span {
font-size: 150%;
}
:
Esimerkki
Tässä esimerkissä kappaleelle on asetettu koko
16px, ja sen sisällä olevalle span-elementille - larger.
Tässä tapauksessa span-elementin fontin koko on
suurempi kuin sen vanhemman (kappaleen):
<p>
Lorem <span>ipsum dolor</span> sit amet.
</p>
p {
font-size: 16px;
}
span {
font-size: larger;
}
:
Esimerkki
Huomaa, että eri
font-family
-oinaisuudella ja samalla font-size-koolla varustetut fontit voivat
visuaalisesti olla hyvinkin erikokoisia (ongelman ratkaisemiseksi
katso ominaisuus font-size-adjust).
Alla olevassa esimerkissä molemmille kappaleille on asetettu font-size
arvoksi 16px, mutta eri 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";
}
: