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