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