тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

Свойство font-size

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

Синтаксис

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

Значения в виде ключевых слов

Значение Описание
xx-small Самый самый маленький. Пример: Lorem ipsum dolor sit amet.
x-small Самый маленький. Пример: Lorem ipsum dolor sit amet.
small Маленький. Пример: Lorem ipsum dolor sit amet.
medium Средний. Пример: Lorem ipsum dolor sit amet.
large Большой. Пример: Lorem ipsum dolor sit amet.
x-large Очень большой. Пример: Lorem ipsum dolor sit amet.
xx-large Самый большой. Пример: Lorem ipsum dolor sit amet.
larger Больше шрифта родителя на некоторое значение.
smaller Меньше шрифта родителя на некоторое значение.

Значение по умолчанию: medium.

Пример

Давайте установим абзацам размер шрифта в 20px:

<p> Lorem ipsum dolor sit amet. </p> p { font-size: 20px; }

:

Пример

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

<p> Lorem <span>ipsum dolor</span> sit amet. </p> p { font-size: 16px; } span { font-size: 150%; }

:

Пример

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

<p> Lorem <span>ipsum dolor</span> sit amet. </p> p { font-size: 16px; } span { font-size: 150%; }

:

Пример

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

<p> Lorem <span>ipsum dolor</span> sit amet. </p> p { font-size: 16px; } span { font-size: larger; }

:

Пример

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

В примере ниже обоим абзацам задан font-size в 16px, но разные font-family:

<p id="elem1"> Lorem ipsum dolor sit amet. </p> <p id="elem2"> Lorem ipsum dolor sit amet. </p> #elem1 { font-size: 16px; font-family: Arial; } #elem2 { font-size: 16px; font-family: "Times New Roman"; }

: