Свойство font в CSS: сокращённая запись типографических параметров
Свойство font в CSS: сокращённая запись типографических параметров
Свойство font в CSS объединяет в одной декларации основные параметры текста: начертание, насыщенность, размер, межстрочный интервал и семейство шрифта. Чтобы запись работала предсказуемо, нужно соблюдать порядок значений и обязательно указывать размер вместе с гарнитурой. Ниже разберём синтаксис, примеры и ограничения shorthand-записи.
Что делает сокращённое свойство font
Font — это сокращённая запись нескольких типографических CSS-свойств. Она позволяет задать внешний вид текста компактнее, чем набор отдельных деклараций. В классическом варианте shorthand управляет font-style, font-variant, font-weight, font-stretch, font-size, line-height и font-family. Такая запись особенно удобна для повторяющихся ролей: основного текста, заголовков, подписей, кнопок и элементов навигации.
- font-style определяет обычное, наклонное или курсивное начертание.
- font-variant задаёт вариант отображения, например капитель в поддерживаемых сценариях.
- font-weight отвечает за насыщенность: normal, bold или числовое значение.
- font-stretch выбирает степень сжатия или расширения гарнитуры, если такие начертания доступны.
- font-size задаёт размер букв и является обязательной частью shorthand.
- line-height определяет высоту строки и записывается после размера через косую черту.
- font-family указывает гарнитуру и резервные семейства для замены при отсутствии шрифта.
Сокращённая запись не заменяет все свойства, связанные с типографикой. Цвет текста, расстояние между буквами, регистр, выравнивание, переносы и другие параметры задаются отдельно. Поэтому font отвечает за сам шрифт и вертикальный ритм строки, но не оформляет текст целиком.
Синтаксис font и обязательные значения
Общий синтаксис можно представить так: необязательные font-style, font-variant, font-weight и font-stretch, затем обязательный font-size, необязательный line-height после косой черты и обязательный font-family. Браузер распознаёт параметры по их типу, но порядок остаётся важным: размер должен находиться перед гарнитурой, а line-height — сразу после размера.
Минимальная запись для обычного текста
Для базового текста достаточно указать размер и семейство. Пример font: 16px Arial, sans-serif задаёт размер 16 пикселей и сначала предлагает Arial, а затем любую доступную гарнитуру без засечек. Резервное семейство важно: оно помогает сохранить общий характер текста, если основной шрифт не установлен или не загрузился.
Запись с межстрочным интервалом
Межстрочный интервал добавляют через косую черту: font: 16px/1.5 Arial, sans-serif. Число 1.5 означает множитель от размера шрифта, поэтому вычисляемая высота строки будет зависеть от текущего font-size. Можно указать и абсолютное значение, например font: 16px/24px Arial, sans-serif, но относительный множитель обычно лучше масштабируется.
Полная запись с начертанием и насыщенностью
Когда нужно выделить текст, необязательные параметры ставят перед размером. Например, font: italic 700 20px/1.3 Georgia, serif задаёт курсивное начертание, насыщенность 700, размер 20 пикселей, межстрочный интервал 1.3 и гарнитуру Georgia с резервом serif. Необязательные слова можно пропускать, но обязательные размер и семейство должны остаться.
Как правильно составить декларацию font
При ручной работе удобнее собирать сокращённую запись слева направо. Сначала определите роль текста, затем выберите нужные параметры и проверьте результат в браузере. Такой порядок снижает риск перепутать font-weight с font-size или случайно задать свойство, которого нет в подключённом шрифте.
- Определите назначение текста: основной абзац, заголовок, подпись, кнопка или служебная надпись.
- Выберите стиль, вариант, насыщенность и ширину только при необходимости.
- Укажите размер в подходящих единицах: px, rem, em, %, vw или другой допустимой единице.
- Добавьте line-height через косую черту, если нужно зафиксировать вертикальный ритм.
- Завершите запись семейством шрифтов и резервным generic-семейством, например sans-serif или serif.
- Проверьте переносы, контраст, читаемость и наличие выбранного начертания в файлах шрифта.
Практические примеры применения font
Основной текст статьи
Для длинного чтения важны не только размер, но и стабильная высота строки. Декларация font: 1rem/1.6 Inter, Arial, sans-serif задаёт относительный размер, увеличивает расстояние между строками и сохраняет нейтральный характер текста за счёт резервных гарнитур. Если в проекте используется собственный шрифт, его имя ставят первым в списке font-family.
Заголовок с акцентным начертанием
Для заголовка можно использовать font: 700 2rem/1.1 Arial, sans-serif. Числовое значение 700 обычно соответствует полужирному начертанию, а line-height 1.1 уменьшает вертикальные интервалы между строками крупного текста. На узком экране такой заголовок следует проверить отдельно: слишком плотная строка может ухудшить восприятие многострочного заголовка.
Кнопка и элементы интерфейса
Для кнопок и навигации часто требуется компактная, но заметная типографика. Пример font: 600 0.875rem/1.2 Inter, Arial, sans-serif задаёт средне-полужирное начертание, небольшой размер и контролируемую высоту строки. Отступы, цвет, границы и регистр текста здесь нужно задать отдельными свойствами, потому что font их не включает.
Адаптивный размер через rem
Единицы rem связывают размер текста с корневым размером документа. Например, font: 1.25rem/1.3 Georgia, serif сохраняет пропорциональную настройку при изменении базового размера. Такой подход удобен для дизайн-систем, где размеры текста описываются шкалой: один уровень для подписи, следующий для обычного текста, ещё больший — для подзаголовка.
Какие параметры не входят в font
Свойство font не является универсальной командой для всего оформления текста. После его применения браузер не узнает, какой нужен цвет, интерлиньяж абзаца с учётом отступов или допустимая ширина строки. Эти характеристики относятся к другим CSS-свойствам и должны поддерживать выбранную типографическую систему отдельно.
- color задаёт цвет символов.
- letter-spacing управляет расстоянием между буквами.
- word-spacing изменяет расстояние между словами.
- text-transform меняет регистр отображения.
- text-align задаёт горизонтальное выравнивание.
- text-indent управляет отступом первой строки.
- text-decoration отвечает за подчёркивание и другие декоративные линии.
- max-width и width ограничивают ширину текстового блока, но не являются частью font.
Наследование и сброс значений
Font наследуется от родительского элемента, если для дочернего элемента не задано другое значение. Ключевые слова inherit, initial, unset и revert позволяют управлять этим поведением. При использовании shorthand важно помнить, что незаданные параметры не обязательно сохраняют прежние значения: сокращённая декларация может сбросить связанные настройки к исходным.
Частые ошибки при использовании font
- Пропускать font-family и оставлять только размер или насыщенность. Shorthand требует обязательного семейства шрифтов.
- Ставить line-height не после размера, а в конце записи. Межстрочный интервал должен следовать непосредственно за font-size.
- Путать порядок значений. Насыщенность и стиль идут перед размером, а семейство завершает декларацию.
- Использовать начертание, которого нет в файле шрифта. Браузер может имитировать его или заменить ближайшим доступным вариантом.
- Забывать о резервных семействах. При сбое загрузки текст без fallback может отобразиться непредсказуемо.
- Заменять font отдельными свойствами без проверки каскада. Более поздняя декларация или правило с большей специфичностью может изменить результат.
- Задавать фиксированный line-height крупным заголовкам без проверки переносов. При увеличении текста строки могут выглядеть слишком тесными.
Отдельная ошибка — попытка использовать font для подключения шрифта. Подключение файлов выполняется через правило @font-face, а свойство font-family только выбирает уже объявленную гарнитуру. Также font не управляет загрузкой, отображением и резервированием шрифта; это задачи других механизмов CSS и браузера.
Чеклист перед публикацией CSS
Перед публикацией стилей проверьте не только валидность строки, но и визуальный результат на разных размерах экрана. Хорошая shorthand-запись должна быть компактной, понятной и соответствовать роли текста в интерфейсе. Если параметров становится слишком много, отдельные свойства иногда читаются лучше и упрощают последующее сопровождение.
- Проверьте, что в записи присутствуют font-size и font-family.
- Убедитесь, что line-height стоит сразу после размера и отделён косой чертой.
- Проверьте доступность нужных начертаний в подключённой гарнитуре.
- Добавьте резервное семейство, соответствующее характеру основного шрифта.
- Сравните отображение текста на широком и узком экране.
- Убедитесь, что shorthand не сбрасывает важные параметры компонента.
- Отдельно настройте цвет, межбуквенный интервал, выравнивание и переносы.
- Проверьте читаемость с увеличенным размером текста.
Часто задаваемые вопросы о font в CSS
Что такое font shorthand в CSS?
Font shorthand — это сокращённая запись нескольких свойств шрифта в одной CSS-декларации. Она может включать стиль, вариант, насыщенность, ширину, размер, межстрочный интервал и семейство. Обязательными частями обычной записи остаются font-size и font-family.
Можно ли написать font только с размером текста?
Нет, для стандартной shorthand-записи одного размера недостаточно. Декларация должна содержать и семейство шрифта, например font: 18px sans-serif. Если нужно изменить только размер существующего текста, используйте отдельное свойство font-size.
Как указать line-height в свойстве font?
Line-height указывают сразу после font-size через косую черту: font: 16px/1.5 Arial, sans-serif. Межстрочный интервал можно задать числом-множителем или длиной, например 24px. Относительное число обычно удобнее для адаптивного текста и разных размеров шрифта.
Чем font отличается от font-family?
Font-family выбирает только семейство шрифта и позволяет перечислить резервные варианты. Font задаёт более широкий набор параметров, включая размер, насыщенность и line-height. Поэтому font-family подходит для точечного изменения гарнитуры, а font — для описания полной типографической роли элемента.
Нужно ли всегда указывать запасной шрифт?
Да, запасное семейство желательно указывать в конце списка. Если основная гарнитура недоступна, браузер выберет fallback. Generic-семейство вроде sans-serif или serif помогает сохранить ожидаемый общий характер текста и делает поведение интерфейса более предсказуемым.
Можно ли использовать font для изменения цвета текста?
Нет, цвет не входит в shorthand font. Его задают отдельным свойством color. Аналогично отдельно настраиваются letter-spacing, text-align, text-transform, text-decoration, ширина текстового блока и другие параметры оформления.
Когда лучше не использовать сокращённую запись?
Откажитесь от shorthand, если компонент требует множества специальных типографических настроек, которые легко случайно сбросить. Отдельные свойства удобнее при сложной дизайн-системе, подробной отладке и постепенном переопределении параметров. Font особенно полезен там, где набор значений стабилен и повторяется.
Вывод
Свойство font помогает компактно описывать типографику и поддерживать единый ритм текста в CSS. Запомните главное: размер и семейство обязательны, line-height ставится после размера, а цвет и другие параметры оформления задаются отдельно. Проверяйте каскад, резервные шрифты и доступность нужных начертаний.
Если вы подбираете гарнитуру для сайта, приложения или бренда, создайте собственный шрифт на fontgenerator.ru и используйте его в типографической системе проекта.