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

cssvalitsin {
  font-size: arvo;
}

Arvot avainsanoina

Oletusarvo: medium.

Esimerkki

Asetetaan kappaleille fontin kooksi 20px:

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

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

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

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

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

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

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

Результат: