Omadus font-size

Omadus font-size määrab fondi suuruse. Omaduse väärtuseks võivad olla suvalised mõõtühikud (tavaliselt px, em või rem) või spetsiaalsed võtmesõnad (kasutatakse väga harva).

Süntaks

cssvalija {
  font-size: vaartus;
}

Väärtused võtmesõnadena

Vaikeväärtus: medium.

Näide

Määrame lõigetele fondi suuruseks 20px:

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

cssp {
  font-size: 20px;
}

Результат:

Näide

Selles näites on lõigu suuruseks määratud 16px ja selle sees oleva span-i suuruseks 150%. Sel juhul on span-i fondi suurus 150% oma vanemast, ehk lõigust, ja selle tegelik suurus on 16px * 150% = 24px:

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

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

Результат:

Näide

Selles näites on lõigu suuruseks määratud 16px ja selle sees oleva span-i suuruseks larger. Sel juhul on span-i fondi suurus suurem kui selle vanemal (lõigul):

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

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

Результат:

Näide

Pange tähele, et erineva font-family ja sama font-size-iga fondid võivad visuaalselt olla üpris erineva suurusega (selle probleemi lahendamiseks vaata omadust font-size-adjust).

Allolevas näites on mõlema lõigu font-size määratud 16px-ks, kuid erinev 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";
}

Результат: