Свойство 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";
}
: