Vlastnosť font-size

Vlastnosť font-size nastavuje veľkosť písma textu. Hodnotou vlastnosti sú ľubovoľné jednotky pre veľkosti (spravidla sú to px, em alebo rem) alebo špeciálne kľúčové slová (používajú sa veľmi zriedkavo).

Syntax

cssselektor {
  font-size: hodnota;
}

Hodnoty vo forme kľúčových slov

Predvolená hodnota: medium.

Príklad

Nastavme odsekom veľkosť písma na 20px:

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

cssp {
  font-size: 20px;
}

Результат:

Príklad

V tomto príklade je pre odsek nastavená veľkosť na 16px, a pre span vnútri neho - 150%. V tomto prípade bude veľkosť písma pre span predstavovať 150% od svojho rodiča, teda odseku, a jeho skutočná veľkosť bude 16px * 150% = 24px:

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

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

Результат:

Príklad

V tomto príklade je pre odsek nastavená veľkosť na 16px, a pre span vnútri neho - larger. V tomto prípade bude veľkosť písma pre span väčšia ako u jeho rodiča (odseku):

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

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

Результат:

Príklad

Všimnite si, že písma s rôznymi font-family a rovnakým font-size môžu byť vizuálne úplne inej veľkosti (pre riešenie tohto problému pozri vlastnosť font-size-adjust).

V príklade nižšie majú obom odsekom nastavený font-size na 16px, ale rôzne 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";
}

Результат: