Font-size īpašība

Īpašība font-size nosaka teksta fonta izmēru. Īpašības vērtības ir jebkuras izmēru vienības (parasti px, em vai rem) vai speciāli atslēgvārdi (tiš izmanto ļoti reti).

Sintakse

cssselektors {
  font-size: vērtība;
}

Vērtības atslēgvārdu veidā

Noklusējuma vērtība: medium.

Piemērs

Uzstādīsim rindkopām fonta izmēru uz 20px:

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

cssp {
  font-size: 20px;
}

Результат:

Piemērs

Šajā piemērā rindkopai ir norādīts izmērs 16px, bet iekšējam span - 150%. Šajā gadījumā span fonta izmērs būs 150% no sava vecāka, t.i., rindkopas, un tā reālais izmērs būs 16px * 150% = 24px:

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

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

Результат:

Piemērs

Šajā piemērā rindkopai ir norādīts izmērs 16px, bet iekšējam span - larger. Šajā gadījumā span fonta izmērs būs lielāks nekā tā vecākam (rindkopai):

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

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

Результат:

Piemērs

Ievērojiet, ka fonti ar atšķirīgu font-family un vienādu font-size vizuāli var būt pilnīgi atšķirīga izmēra (šīs problēmas risināšanai skatīt īpašību font-size-adjust).

Zemāk redzamajā piemērā abām rindkopām ir norādīts font-size 16px, bet atšķirīgs 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";
}

Результат: