font-variation-settings: точная настройка осей вариативного шрифта
font-variation-settings: точная настройка осей вариативного шрифта
Свойство CSS font-variation-settings напрямую управляет осями вариативного шрифта: толщиной, шириной, наклоном, оптическим размером и пользовательскими параметрами. Оно позволяет задать точное числовое значение, например 650 для насыщенности или 90 для ширины. Ниже разберём синтаксис, совместимость, практические сценарии и типичные ошибки.
Что такое font-variation-settings
font-variation-settings — низкоуровневое CSS-свойство для управления вариационными осями шрифта. В отличие от обычного набора отдельных файлов Regular, Medium, Bold и Condensed, вариативная гарнитура хранит диапазоны параметров внутри одного файла. Браузер интерполирует форму глифов между крайними значениями и строит промежуточное начертание.
Такой подход не означает, что любой шрифт можно произвольно растянуть или утолщить без потери качества. Возможности определяет сам файл Variable Font: он содержит зарегистрированные оси OpenType и, иногда, пользовательские оси. Если ось отсутствует, запись в font-variation-settings не даст ожидаемого результата.
Какие параметры можно изменять
Каждая ось обозначается четырёхсимвольным тегом. Тег wght отвечает за толщину, wdth — за ширину, opsz — за оптический размер, slnt — за наклон, а ital обычно переключает курсивный вариант. В конкретном шрифте могут встречаться нестандартные оси, например для контраста, высоты строчных или степени декоративности.
- wght — вес или толщина начертания; часто соответствует диапазону от Light до Black.
- wdth — ширина знаков, от узкого до расширенного варианта.
- opsz — оптическая настройка для разных кеглей и условий чтения.
- slnt — наклон прямого начертания, обычно с сохранением его конструкции.
- ital — переключение между прямым и курсивным дизайном, если ось предусмотрена.
- Пользовательские оси — дополнительные параметры, заданные автором конкретной гарнитуры.
Синтаксис и правила записи значений
Значение свойства состоит из списка пар: четырёхсимвольный тег в кавычках и число через пробел. Несколько осей разделяются запятыми. Базовая форма записи выглядит так: font-variation-settings: 'wght' 650, 'wdth' 92;. Кавычки помогают явно обозначить тег, а число задаёт положение на шкале оси.
Числовой диапазон не универсален. Для wght один шрифт может поддерживать значения от 300 до 800, другой — от 100 до 900. Значения wdth, slnt и пользовательских осей также зависят от метаданных гарнитуры. Поэтому сначала проверьте документацию шрифта или его настройки в редакторе, а затем используйте значения внутри заявленного диапазона.
Пример с толщиной и шириной
Для заголовка можно одновременно задать полужирное и слегка сжатое начертание: font-variation-settings: 'wght' 680, 'wdth' 92;. Если гарнитура поддерживает эти оси, текст станет толще и компактнее. Такой приём полезен для карточек, навигации и заголовков, где нужно сохранить визуальный акцент, но ограничено место по ширине.
Оси регистрируемых и пользовательских параметров
Для зарегистрированных осей используются общепринятые теги в нижнем регистре: wght, wdth, opsz, slnt и ital. Пользовательские оси обычно обозначаются четырьмя заглавными латинскими буквами, например 'GRAD'. Регистр важен: 'wght' и 'WGHT' не являются взаимозаменяемыми обозначениями.
Пользовательская ось не имеет универсального смысла вне конкретной гарнитуры. Например, тег может управлять градацией контраста или другим параметром рисунка, но точная интерпретация определяется автором шрифта. Не переносите настройки такой оси из одного Variable Font в другой без проверки.
Связь с font-weight, font-stretch и font-style
Высокоуровневые свойства CSS часто удобнее для стандартных задач. font-weight отвечает за вес, font-stretch — за степень сжатия или расширения, а font-style — за прямое, наклонное или курсивное начертание. Когда вариативный шрифт корректно описан, браузер может сопоставлять эти свойства с осями wght, wdth и slnt или ital.
font-variation-settings нужен тогда, когда стандартного свойства недостаточно: требуется промежуточное значение, пользовательская ось или точная комбинация нескольких параметров. Низкоуровневая настройка может переопределять соответствующее высокоуровневое свойство, поэтому не задавайте конфликтующие значения без необходимости.
Практичный вариант — использовать семантические свойства для базового оформления, а font-variation-settings оставлять для специальных случаев. Например, задайте font-weight: 650; для веса, а отдельную ось 'GRAD' 40 подключайте только там, где она действительно поддерживается и нужна дизайну.
Подключение вариативного шрифта через @font-face
Сначала объявите файл шрифта в @font-face и укажите семейство, формат и диапазоны поддерживаемых свойств. Пример текстовой записи: @font-face { font-family: 'Studio Sans'; src: url('studio-sans.woff2') format('woff2'); font-weight: 300 800; font-stretch: 75% 125%; }. Диапазоны сообщают браузеру, какие значения доступны для стандартных CSS-свойств.
После подключения примените гарнитуру к нужному элементу: .title { font-family: 'Studio Sans', sans-serif; font-variation-settings: 'wght' 720, 'wdth' 88; }. Резервный sans-serif необходим на случай, если файл не загрузился или браузер не смог использовать вариационные данные. Проверяйте результат не только визуально, но и в разных размерах текста.
Практические сценарии настройки осей
Заголовки с точным визуальным весом
В интерфейсе между 600 и 700 может быть заметная разница, особенно у крупного заголовка. Значение font-variation-settings: 'wght' 625; позволяет получить промежуточный вес, если он входит в диапазон шрифта. Это помогает выстроить иерархию без резкого перехода от полужирного к жирному.
Компактный текст для карточек и меню
Ось wdth полезна, когда текст должен поместиться в ограниченную область, но уменьшать кегль нельзя. Запись font-variation-settings: 'wdth' 86, 'wght' 600; создаёт более узкое и достаточно выразительное начертание. Не превращайте этот приём в механическое сжатие всех блоков: узкая версия должна сохранять читаемость и равномерный ритм слова.
Оптический размер для разных кеглей
Ось opsz предназначена для адаптации рисунка к размеру текста. В малых кеглях шрифт может получать более открытые формы и усиленные детали, а в крупных — более тонкую настройку контраста и пропорций. Если гарнитура поддерживает opsz, используйте font-optical-sizing: auto; или задавайте ось вручную, когда нужен предсказуемый результат.
Наклон без отдельного файла курсива
Ось slnt обычно меняет наклон прямого рисунка, не создавая полноценную курсивную конструкцию. Например, font-variation-settings: 'slnt' -10; задаёт наклон, если именно такой диапазон предусмотрен шрифтом. Ось ital работает иначе: она переключает курсивный дизайн, когда автор гарнитуры включил его в вариационную модель.
Адаптивная типографика и плавные значения
Вариативный шрифт удобно сочетать с медиа-запросами и функциями CSS. Например, для небольшого экрана можно использовать font-variation-settings: 'wght' 620, 'wdth' 90;, а для широкого — 'wght' 680, 'wdth' 100;. Такой подход позволяет подстроить заголовки под доступную ширину без множества отдельных файлов шрифта.
Плавные изменения через calc() или clamp() возможны, если итоговое значение остаётся корректным для конкретной оси. Однако чрезмерная динамика усложняет тестирование: текст может выглядеть по-разному на соседних ширинах экрана. Для интерфейса задайте понятные границы, проверьте длинные слова и убедитесь, что изменение толщины не ухудшает контраст.
Частые ошибки при использовании свойства
- Использовать ось, которой нет в файле шрифта. CSS не добавит реальную вариацию, отсутствующую в гарнитуре.
- Игнорировать диапазон значений. Число за пределами заявленной шкалы может быть ограничено или дать непредсказуемый визуальный результат.
- Путать slnt и ital. Наклон прямого рисунка не равен полноценному курсивному начертанию.
- Забывать кавычки и формат тега. Ось должна иметь ровно четыре символа, а регистр является значимым.
- Конфликтовать с font-weight или font-style. Несогласованные правила усложняют каскад и отладку.
- Сжимать текст вместо выбора подходящего размера. Узкая ось не всегда сохраняет комфортную читаемость.
- Не тестировать fallback. При недоступном файле пользователь увидит резервную гарнитуру с другими метриками.
- Настраивать каждую ось без цели. Большое число тонких вариаций может нарушить визуальную иерархию интерфейса.
Чеклист перед публикацией
- Проверьте, что подключён именно вариативный файл, а не статический экземпляр гарнитуры.
- Уточните список осей и допустимые диапазоны в документации шрифта.
- Выберите стандартные свойства CSS для обычного веса, ширины и стиля.
- Добавьте font-variation-settings только для точных или нестандартных параметров.
- Проверьте регистр и длину каждого четырёхсимвольного тега.
- Протестируйте заголовки, основной текст, цифры и длинные слова в нескольких кеглях.
- Сравните результат с резервным шрифтом и проверьте загрузку файла в инструментах разработчика.
- Оцените читаемость, контраст и стабильность макета на узком и широком экране.
Часто задаваемые вопросы
Можно ли использовать font-variation-settings с обычным шрифтом?
Свойство можно записать и для обычной гарнитуры, но эффект появится только при наличии соответствующих вариационных осей. Статический шрифт не получит настоящие промежуточные начертания автоматически. Для обычного файла используйте font-weight, font-stretch и font-style либо подключайте отдельные файлы начертаний.
Чем font-variation-settings отличается от font-weight?
font-weight — семантическое высокоуровневое свойство для выбора толщины текста. font-variation-settings напрямую обращается к оси wght и позволяет задать значение, которое не представлено отдельным именованным стилем. Для стандартной типографики предпочтительнее font-weight, а низкоуровневую запись стоит применять для точной настройки.
Как узнать, какие оси есть у вариативного шрифта?
Проверьте страницу гарнитуры, файл документации или сведения о шрифте в редакторе, который показывает OpenType-оси. Ищите теги, диапазоны и описание назначения каждого параметра. Наличие расширения WOFF2 само по себе не сообщает, какие именно вариации поддерживает файл.
Можно ли задать несколько осей одновременно?
Да. Оси перечисляются в одном значении через запятую: font-variation-settings: 'wght' 650, 'wdth' 94, 'opsz' 18;. Браузер применит их совместно, если все теги существуют в шрифте. Для удобства поддержки проекта сохраняйте такие комбинации рядом с назначением компонента или текстового стиля.
Что означает значение normal?
Значение normal отключает явную настройку вариационных осей, заданную через font-variation-settings. После этого браузер снова использует значения, которые следуют из других CSS-свойств и настроек шрифта. Это удобно для сброса локального переопределения в компоненте или медиазапросе.
Нужно ли всегда вручную задавать ось opsz?
Нет. Если шрифт поддерживает оптический размер, часто достаточно font-optical-sizing: auto;, чтобы браузер учитывал размер текста. Ручная настройка opsz нужна, когда дизайн требует конкретного положения оси или когда вы хотите одинаковое значение в разных компонентах независимо от кегля.
Влияет ли большое число осей на скорость загрузки?
На скорость прежде всего влияют размер файла, формат, способ загрузки и объём используемых символов. Вариативный файл может заменить несколько статических файлов, но не всегда будет меньше каждого из них в сумме. Подключайте нужные начертания, используйте WOFF2 и проверяйте фактическую загрузку страницы.
Вывод
font-variation-settings даёт точный контроль над вариативным шрифтом через значения осей OpenType. Используйте его для промежуточной толщины, нестандартной ширины, наклона, оптического размера и пользовательских параметров, но всегда сверяйтесь с возможностями конкретной гарнитуры и проверяйте читаемость.