Уласцівасць font-size

Уласцівасць font-size ўстанаўлівае памер шрыфту тэксту. Значэннем уласцівасці служаць любыя адзінкі вымярэння для памераў (як правіла, гэта px, em ці rem) альбо спецыяльныя ключавыя словы (выкарыстоўваюцца вельмі рэдка).

Сінтаксіс

cssселектар {
  font-size: значэнне;
}

Значэнні ў выглядзе ключавых слоў

Значэнне па змаўчанні: medium.

Прыклад

Давайце ўстанавім абзацам памер шрыфту ў 20px:

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

cssp {
  font-size: 20px;
}

Результат:

Прыклад

У гэтым прыкладзе для абзаца зададзены памер у 16px, а для span унутры яго - 150%. У гэтым выпадку памер шрыфту для span будзе складаць 150% ад свайго бацькоўскага элемента, гэта значыць абзаца, і яго рэальны памер будзе 16px * 150% = 24px:

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

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

Результат:

Прыклад

У гэтым прыкладзе для абзаца зададзены памер у 16px, а для span унутры яго - larger. У гэтым выпадку памер шрыфту для span будзе больш, чым у яго бацькоўскага элемента (абзаца):

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

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

Результат:

Прыклад

Звярніце ўвагу на тое, што шрыфты з рознымі font-family і аднолькавымі font-size візуальна могуць быць зусім не аднаго памеру (для вырашэння дадзенай праблемы глядзіце ўласцівасць font-size-adjust).

У прыкладзе ніжэй абодвом абзацам зададзены font-size у 16px, але розныя 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";
}

Результат: