font-feature-settings в CSS: лигатуры, цифры и малые прописные
Что такое font-feature-settings в CSS
font-feature-settings — CSS-свойство для низкоуровневого управления OpenType-функциями шрифта. С его помощью можно включать и отключать лигатуры, менять форму и ширину цифр, применять малые прописные и другие типографические возможности. В статье разберём синтаксис, теги OpenType, практические сценарии и ошибки, из-за которых настройка не даёт видимого результата.
Свойство не рисует новые буквы самостоятельно и не превращает любой шрифт в типографически продвинутый. Браузер передаёт шрифту указание активировать определённую функцию, а гарнитура подставляет предусмотренные дизайнером глифы. Если нужной функции или альтернативных знаков нет в файле шрифта, визуальных изменений не будет.
Как читать синтаксис и теги OpenType
Каждая функция записывается в виде четырёхсимвольного тега в кавычках. После тега указывают числовое значение: 1 включает функцию, 0 отключает её. Базовый пример выглядит так: font-feature-settings: "liga" 1;. Тег liga отвечает за стандартные лигатуры, например объединение соседних букв в единый глиф.
В одном свойстве можно перечислить несколько функций через запятую. Например, правило font-feature-settings: "tnum" 1, "lnum" 1; включает табличные цифры одинаковой ширины и цифры на базовой линии. Значение normal возвращает обычное поведение шрифта: font-feature-settings: normal;. Синтаксис нужно проверять внимательно: тег состоит ровно из четырёх символов и чувствителен к корректному написанию.
Какие функции реально доступны
OpenType-теги являются не универсальным набором CSS-команд, а обозначениями функций шрифта. Теги liga, tnum или smcp стали распространёнными, но конкретная гарнитура может поддерживать только часть возможностей. Перед внедрением проверьте спецификацию шрифта, таблицу OpenType-функций или протестируйте текстовый образец в браузере.
Почему значение 1 не всегда означает одинаковый результат
Одна и та же функция зависит от дизайна гарнитуры. В одном шрифте стандартная лигатура fi будет заметной, а в другом буквы могут почти не измениться. Табличные цифры обычно получают равную ширину, но их пропорции и высота определяются самим шрифтом. Поэтому font-feature-settings задаёт типографический режим, а не фиксированный внешний вид.
Лигатуры: liga, clig, dlig и calt
Лигатура — это единый глиф для определённой последовательности символов. В текстовых шрифтах часто встречаются стандартные сочетания fi, fl, ffi и ffl. Они помогают избежать нежелательных столкновений элементов букв и делают набор визуально цельнее. Стандартные лигатуры обычно обозначаются тегом liga, а контекстные лигатуры — тегом clig.
Для длинных текстов стандартные лигатуры чаще всего оставляют включёнными, если они не меняют узнаваемость символов. Дискреционные лигатуры dlig относятся к декоративным альтернативам: они могут быть уместны в заголовке, логотипе или приглашении, но мешать чтению в интерфейсе. Контекстные альтернативы calt заменяют знаки с учётом соседних символов и особенно часто встречаются в выразительных дисплейных гарнитурах.
Пример настройки стандартных лигатур: .article-text { font-feature-settings: "liga" 1, "clig" 1; }. Для декоративного заголовка можно отдельно включить discretionary ligatures: .display-title { font-feature-settings: "dlig" 1; }. Не применяйте dlig ко всему сайту без проверки: декоративные соединения способны ухудшить разборчивость слов и нарушить привычный рисунок текста.
Цифры: табличные, пропорциональные и старостильные
Форма цифр должна соответствовать задаче. В таблицах, прайс-листах, финансовых показателях и интерфейсах сравнения важна одинаковая ширина знаков: цифры не должны смещать соседние значения. В обычном тексте, датах и карточках товаров часто лучше смотрятся пропорциональные цифры, где единица уже нуля, а широкие знаки занимают больше места.
- tnum включает табличные цифры одинаковой ширины; это удобно для колонок, счетчиков и денежных значений.
- pnum включает пропорциональные цифры, ширина которых зависит от формы знака; этот режим подходит для предложений и коротких подписей.
- lnum использует цифры на базовой линии, привычные для интерфейсов, таблиц и технической информации.
- onum включает старостильные цифры с разной высотой, которые лучше сочетаются с книжным текстом и гуманистическими гарнитурами.
- zero добавляет перечёркнутый ноль, если шрифт предусматривает такую альтернативу; это помогает отличать 0 от буквы O в коде и идентификаторах.
Для финансовой таблицы подойдёт правило .price-table { font-feature-settings: "tnum" 1, "lnum" 1; }. Для основного текста с историческими датами можно использовать .book-copy { font-feature-settings: "pnum" 1, "onum" 1; }. Важно не смешивать противоположные режимы без причины: tnum и pnum задают разные требования к ширине, а lnum и onum — к высоте цифр.
Дополнительные числовые функции решают специальные задачи. Тег frac может включать диагональные дроби, ord — надстрочные обозначения порядковых числительных, sups — надстрочные символы, subs — подстрочные. Такие функции зависят от поддержки в шрифте и не заменяют полноценную математическую верстку, если требуется сложная формула или точное позиционирование.
Малые прописные: smcp и c2sc
Малые прописные, или капитель, — это специальные глифы высотой примерно с x-height строчных букв, но с формой прописных. Они предназначены не для механического уменьшения размера текста, а для аккуратного набора аббревиатур, рубрик, имён авторов и коротких выделений. Качественная капитель сохраняет правильную толщину штрихов и межбуквенные пропорции.
Тег smcp заменяет строчные буквы на малые прописные. Тег c2sc заменяет обычные прописные на малые прописные. Поэтому режим all-small-caps обычно требует сочетания двух функций, чтобы и строчные, и уже набранные прописные выглядели единообразно: .label { font-feature-settings: "smcp" 1, "c2sc" 1; }. Точный результат зависит от структуры OpenType-таблиц конкретного шрифта.
Не путайте капитель с font-size: 70%. Уменьшенные обычные прописные имеют другой рисунок, слишком тонкие штрихи и часто нарушают ритм строки. Если шрифт не содержит настоящих малых прописных, браузер не сможет получить полноценную замену только средствами font-feature-settings. В таком случае лучше выбрать гарнитуру с поддержкой small caps.
Когда выбрать font-variant вместо низкоуровневых тегов
Для стандартных сценариев предпочтительнее семантические свойства font-variant-ligatures, font-variant-numeric и font-variant-caps. Они описывают намерение автора понятнее: tabular-nums означает табличные цифры, small-caps — малые прописные, common-ligatures — обычные лигатуры. Такой код легче поддерживать и проверять в дизайн-системе.
font-feature-settings нужен, когда требуется точный доступ к OpenType-функции, для которой нет удобного высокоуровневого аналога, или когда необходимо быстро проверить определённый тег. Например, для стандартных цифр можно написать font-variant-numeric: tabular-nums lining-nums;, а для специфической функции шрифта — font-feature-settings: "zero" 1;. Не задавайте оба способа для одной функции без необходимости.
Практическая схема настройки в проекте
1. Проверьте возможности гарнитуры
Начните с файла шрифта и списка заявленных функций. Уточните, есть ли в нём стандартные и декоративные лигатуры, табличные цифры, старостильные формы, капитель и перечёркнутый ноль. Затем создайте небольшой тестовый текст: fi ffi 0123456789, аббревиатуру и несколько числовых колонок. Такой образец быстро показывает, какие настройки действительно работают.
2. Свяжите функцию с назначением текста
Не включайте все доступные функции глобально. Для основного текста задайте только уместные лигатуры и кернинг, для таблиц — табличные цифры, для книжного набора — старостильные формы, для коротких меток — капитель. Типографическое правило должно объяснять задачу компонента, а не демонстрировать полный список возможностей шрифта.
3. Проверьте переносы, fallback и доступность
Протестируйте текст с реальным содержимым, длинными словами, цифрами, латиницей и кириллицей. Если часть символов берётся из запасного шрифта, визуальный ритм может измениться, а OpenType-функция — примениться только к одному фрагменту. Оцените также контраст, размер и разборчивость: декоративная функция не должна мешать чтению или пониманию данных.
Частые ошибки при использовании font-feature-settings
- Включать все теги подряд. Большое количество альтернатив делает текст непредсказуемым и не всегда улучшает его вид.
- Использовать неверный тег. OpenType-функция не сработает, если в названии ошибка, пропущен символ или перепутаны liga и dlig.
- Ожидать эффекта от неподдерживаемого шрифта. CSS не создаёт отсутствующие глифы и не заменяет профессиональную версию гарнитуры.
- Применять табличные цифры к обычному тексту. Равная ширина удобна для колонок, но может увеличить длину строк и ухудшить ритм абзаца.
- Имитировать малые прописные уменьшением размера. Такой приём не сохраняет пропорции и толщину настоящей капители.
- Забывать о каскаде. Настройка на уровне body может неожиданно повлиять на кнопки, цены, таблицы и сторонние компоненты.
- Не проверять динамический контент. Лигатуры, дроби и альтернативы нужно тестировать не только на демонстрационной строке, но и на реальных данных.
Чеклист перед публикацией интерфейса
- Определите, какую типографическую задачу решает каждая функция.
- Проверьте поддержку OpenType-функций в выбранном файле шрифта.
- Используйте font-variant-* для стандартных сценариев, если этого достаточно.
- Оставьте font-feature-settings для точечного низкоуровневого контроля.
- Проверьте цифры в таблицах, денежных значениях, датах и счетчиках.
- Сравните малые прописные с обычным уменьшенным текстом на реальных размерах.
- Протестируйте fallback-шрифты, кириллицу, латиницу, мобильный экран и длинные строки.
- Убедитесь, что декоративные альтернативы не снижают читаемость и не меняют смысл.
Часто задаваемые вопросы
Что делает font-feature-settings в CSS?
Свойство включает или отключает OpenType-функции шрифта с помощью четырёхсимвольных тегов. Оно позволяет управлять лигатурами, формой цифр, капителью и другими альтернативными глифами. Результат зависит от того, какие функции и знаки предусмотрены в конкретной гарнитуре.
Как включить стандартные лигатуры?
Используйте тег liga со значением 1, например font-feature-settings: "liga" 1;. Для контекстных лигатур можно добавить clig. Перед применением проверьте шрифт: если нужной лигатуры в нём нет, правило останется без видимого эффекта.
Как сделать цифры одинаковой ширины?
Включите табличные цифры тегом tnum: font-feature-settings: "tnum" 1;. Для таблиц и финансовых значений это помогает выровнять колонки. Если одновременно нужна привычная высота цифр на базовой линии, добавьте тег lnum и проверьте результат на выбранной гарнитуре.
Чем отличаются tnum и pnum?
tnum задаёт одинаковую ширину цифр, поэтому значения удобно сравнивать в вертикальных колонках. pnum использует разную ширину знаков, что обычно экономит место и выглядит естественнее в предложениях. Для таблиц выбирают tnum, для непрерывного текста чаще подходит pnum.
Как включить малые прописные?
Для замены строчных букв используйте тег smcp. Если нужно привести к малым прописным также обычные прописные, добавьте c2sc: font-feature-settings: "smcp" 1, "c2sc" 1;. Гарнитура должна содержать настоящие small caps; простое уменьшение размера не является равноценной заменой.
Почему правило font-feature-settings не работает?
Чаще всего причина связана с отсутствием функции в шрифте, ошибкой в четырёхсимвольном теге, перекрытием CSS-правила или использованием другого шрифта из-за ошибки загрузки. Проверьте computed styles, фактически загруженную гарнитуру и тестовую строку с символами, для которых ожидается изменение.
Что лучше: font-feature-settings или font-variant?
Для распространённых задач лучше использовать font-variant-ligatures, font-variant-numeric и font-variant-caps: они яснее выражают намерение и проще читаются в коде. font-feature-settings полезен для точного доступа к OpenType-тегам и редким функциям. Главное — не дублировать конфликтующие настройки без необходимости.
Вывод
font-feature-settings даёт CSS-разработчику прямой контроль над типографическими возможностями OpenType: лигатурами, числовыми стилями и капителью. Используйте его осознанно, учитывайте поддержку шрифта и выбирайте режим под задачу компонента. Для стандартных вариантов начинайте с font-variant-*, а низкоуровневые теги оставляйте для точной настройки.
Нужна гарнитура с лигатурами, цифрами и другими OpenType-функциями? Создайте собственный шрифт на fontgenerator.ru и настройте его под интерфейс, бренд или печатный проект.