font-size
Размер шрифта.
Синтаксис
font-size: value;Значения
| Параметр | Тип | Описание |
|---|---|---|
| px | length | Размер в пикселях: `16px`. |
| rem | length | Относительно размера шрифта страницы: `1.5rem`. |
| em | length | Относительно размера шрифта родителя: `0.8em`. |
| clamp() | function | Плавный размер в заданных пределах: `clamp(1rem, 4vw, 2rem)`. |
Примеры
Размеры в пикселях и rem (обычно 1rem — это 16 пикселей):
<p style="font-size: 12px;">Small text</p>
<p style="font-size: 24px;">Large text</p>
<p style="font-size: 1.5rem;">1.5rem is 24 pixels</p>em считается от размера шрифта родителя:
<style>
.box { font-size: 20px; }
.box small { font-size: 0.7em; }
</style>
<p class="box">Price: $25 <small>incl. tax</small></p>Примечания
Для основного текста не опускайтесь ниже 16 пикселей: мелкий шрифт трудно читать на телефоне. Размеры в rem следуют за размером шрифта, выбранным в настройках браузера, а px его игнорирует.
См. также
- font — Сокращённая запись, которая задаёт начертание, жирность, размер, высоту строки и семейство шрифта в одну строку.
- line-height — Высота строки текста — расстояние между строками.
- px, em, rem, %, vw, vh — Единицы длины в CSS: абсолютные пиксели и относительные единицы.
- clamp() — Держит значение в пределах: желаемое, но не меньше минимума и не больше максимума.
Вопросы и ответы по теме
В учебнике
- Текст и шрифты — Шрифт, размер, жирность, курсив, высота строки, выравнивание и оформление текста, подключение своего шрифта.