font
Сокращённая запись, которая задаёт начертание, жирность, размер, высоту строки и семейство шрифта в одну строку.
Синтаксис
font: style weight size/line-height family;Значения
| Параметр | Тип | Описание |
|---|---|---|
| font-style | keyword | Необязательно: `italic` или `normal`. |
| font-weight | number | Необязательно: `bold`, `400`, `700`… |
| font-size | length | Обязательно: `16px`, `1.2rem`. |
| line-height | number | Необязательно, через косую черту: `16px/1.5`. |
| font-family | list | Обязательно, всегда в конце: `Georgia, serif`. |
Примеры
Несколько свойств шрифта одной строкой:
<style>
.title { font: bold 24px/1.2 Georgia, serif; }
.note { font: italic 14px sans-serif; }
</style>
<p class="title">A bold serif title</p>
<p class="note">A small italic note</p>Поля формы по умолчанию не наследуют шрифт — font: inherit это исправляет:
<style>
button, input { font: inherit; }
</style>
<p style="font-size: 18px;">
<input placeholder="Same font as the text"> <button>Send</button>
</p>Примечания
Размер и семейство обязательны, и семейство должно стоять последним. Всё, что вы пропустили, сбрасывается к значению по умолчанию, поэтому font, записанный после font-weight, может незаметно отменить жирность.
См. также
- font-family — Семейство шрифта со списком запасных вариантов.
- font-size — Размер шрифта.
- font-weight — Насыщенность (жирность) шрифта.
- line-height — Высота строки текста — расстояние между строками.
Вопросы и ответы по теме
В учебнике
- Текст и шрифты — Шрифт, размер, жирность, курсив, высота строки, выравнивание и оформление текста, подключение своего шрифта.