Savybė font-size

Savybė font-size nustato teksto šrifto dydį. Savybės reikšmė gali būti bet kuris dydžio vienetas (dažniausiai px, em arba rem) arba specialūs raktažodžiai (naudojami labai retai).

Sintaksė

cssselektorius {
  font-size: reikšmė;
}

Reikšmės raktažodžių pavidalu

Numatytoji reikšmė: medium.

Pavyzdys

Nustatykime pastraipų šrifto dydį 20px:

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

cssp {
  font-size: 20px;
}

Результат:

Pavyzdys

Šiame pavyzdyje pastraipai nustatytas dydis 16px, o jos viduje esančiam elementui span - 150%. Šiuo atveju elemento span šrifto dydis bus 150% nuo savo tėvinio elemento, t.y. pastraipos, ir jo faktinis dydis bus 16px * 150% = 24px:

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

cssp {
  font-size: 16px;
}
span {
  font-size: 150%;
}

Результат:

Pavyzdys

Šiame pavyzdyje pastraipai nustatytas dydis 16px, o jos viduje esančiam span - larger. Šiuo atveju span šrifto dydis bus didesnis nei jo tėvinio elemento (pastraipos):

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

cssp {
  font-size: 16px;
}
span {
  font-size: larger;
}

Результат:

Pavyzdys

Atkreipkite dėmesį, kad šriftai su skirtingomis font-family ir vienodu font-size vizualiai gali būti visiškai skirtingo dydžio (šiai problemai spręsti žiūrėkite savybę font-size-adjust).

Žemiau pateiktame pavyzdyje abiem pastraipoms nustatytas font-size 16px, bet skirtingos 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";
}

Результат: