Vlastnost font-size

Vlastnost font-size nastavuje velikost písma textu. Hodnotou vlastnosti jsou jakékoli jednotky pro velikosti (obvykle jsou to px, em nebo rem) nebo speciální klíčová slova (používají se velmi zřídka).

Syntaxe

cssselektor {
  font-size: hodnota;
}

Hodnoty ve formě klíčových slov

Výchozí hodnota: medium.

Příklad

Nastavme odstavcům velikost písma na 20px:

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

cssp {
  font-size: 20px;
}

Результат:

Příklad

V tomto příkladu je pro odstavec nastavena velikost na 16px, a pro span uvnitř něj - 150%. V tomto případě bude velikost písma pro span 150% od svého rodiče, tedy odstavce, a jeho skutečná velikost bude 16px * 150% = 24px:

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

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

Результат:

Příklad

V tomto příkladu je pro odstavec nastavena velikost na 16px, a pro span uvnitř něj - larger. V tomto případě bude velikost písma pro span větší, než u jeho rodiče (odstavce):

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

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

Результат:

Příklad

Všimněte si, že písma s různým font-family a stejným font-size mohou vizuálně být zcela odlišné velikosti (pro řešení tohoto problému viz vlastnost font-size-adjust).

V následujícím příkladu mají oběma odstavcům nastaven font-size na 16px, ale různé 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";
}

Результат: