Свойство font-variant в CSS — это переключатель для целой семьи типографических возможностей шрифта. Одной декларацией можно включить капитель, поменять стиль цифр, отключить лигатуры или, наоборот, добавить редкие. Ключевое слово тут — шрифта: свойство ничего не рисует само, оно только сообщает браузеру, какие OpenType-фичи из тех, что уже заложены в шрифт, применить к тексту.
Если шрифт не содержит нужной фичи (например, у него нет капитального начертания), браузер либо синтезирует эффект (плохо, часто выходит некрасиво), либо просто игнорирует значение. Поэтому font-variant редко работает предсказуемо на системных шрифтах вроде Arial — полноценный эффект даёт качественная типографика вроде Playfair, Source Sans Pro, Inter или Recursive.
Технически font-variant — шорт-хэнд для семи подсвойств: font-variant-caps, font-variant-numeric, font-variant-ligatures, font-variant-alternates, font-variant-position, font-variant-east-asian, font-variant-emoji. Разбираем их по одному.
font-variant-caps — капитель и малые прописные
Управляет отображением строчных букв: превращает их в маленькие версии заглавных (small caps). Классический типографический приём для заголовков, ФИО, аббревиатур — когда хочется выделить фрагмент, но не через UPPERCASE, который визуально «орёт».
- normal — отключает капитель, отображение по умолчанию;
- small-caps — строчные буквы превращаются в маленькие заглавные, обычные заглавные не трогаются;
- all-small-caps — в маленькие заглавные превращается всё, включая уже заглавные;
- petite-caps — вариант капители, где маленькие заглавные имеют высоту строчной x-line (ниже, чем у small-caps);
- all-petite-caps — petite-caps для всех букв;
- unicase — смешанное начертание, где заглавные приведены к высоте строчных, а строчные оставлены как есть;
- titling-caps — специальное начертание заглавных для заголовков (в качественных шрифтах штрихи чуть тоньше, чем в обычных капсах).
.chapter-title {
font-variant-caps: small-caps;
/* «Глава Первая» → «ГЛАВА ПЕРВАЯ» маленькими заглавными */
}
.abbreviation {
font-variant-caps: all-small-caps;
/* «CSS» и «html» отрендерятся одинаковой маленькой капителью */
}Синтезированная капитель. Если шрифт не содержит small-caps-начертания, большинство браузеров синтезируют эффект: берут заглавную букву и масштабируют её вниз. Результат хуже, чем настоящая капитель — пропорции штрихов ломаются, оптическая насыщенность становится неровной. Отключить синтез можно через font-synthesis-small-caps: none.
font-variant-numeric — стилизация цифр и дробей
Управляет отображением цифр, дробей и порядковых маркеров. Самое практическое из всех подсвойств — помогает верстать таблицы с числами, финансовые отчёты и любую вёрстку, где важно, чтобы цифры выравнивались по вертикали.
Подробный разбор всех значений — в отдельной статье Свойство font-variant-numeric. Здесь — сводка и главные кейсы.
- lining-nums — цифры одной высоты с заглавными буквами (модерн-стайл);
- oldstyle-nums — цифры разной высоты с выносными элементами (как строчные буквы), напоминают «книжный» стиль;
- proportional-nums — цифры имеют натуральную ширину (единица уже, чем восьмёрка);
- tabular-nums — все цифры одинаковой ширины, идеально для таблиц;
- diagonal-fractions — дробь отображается по диагонали (½, ¾);
- stacked-fractions — числитель над знаменателем через горизонтальную черту;
- ordinal — порядковые маркеры (st, nd, rd, th) как надстрочные;
- slashed-zero — ноль с косой чертой, чтобы отличать от буквы «о».
Практический кейс, которого нет в оригинальной статье: финансовая таблица со сравнением показателей за квартал. Без tabular-nums цифры разной ширины сдвигают колонки на пару пикселей — визуально таблица «прыгает». С tabular-nums все цифры выравниваются как в моноширинном шрифте, но при этом остальной текст сохраняет пропорциональность.
.report-table td {
font-variant-numeric: tabular-nums;
}
.article-body {
/* Правильные дроби в тексте статьи */
font-variant-numeric: diagonal-fractions;
/* «1/2 стакана муки» → отрендерится как ½ */
}
.code-comments {
/* Ноль с чертой — не спутаешь с буквой o */
font-variant-numeric: slashed-zero;
}Несколько значений можно комбинировать в одной декларации через пробел (при условии, что они из разных «подгрупп» — например, стиль высоты и стиль ширины):
.pricing {
font-variant-numeric: lining-nums tabular-nums slashed-zero;
}font-variant-ligatures — лигатуры
Лигатура — это когда две-три буквы отрисованы как один слитый глиф. Классические примеры: fi, fl, ffi — там нижний крючок буквы f сливается с точкой над i и палочкой l. В качественных шрифтах лигатуры включены по умолчанию, потому что улучшают читабельность.
Значения группируются по типам лигатур. Каждое можно включить или выключить (префикс no-):
- common-ligatures / no-common-ligatures — стандартные (fi, fl, ffi). Включены по умолчанию;
- discretionary-ligatures / no-discretionary-ligatures — декоративные, включаются вручную (Th, ct, st в старых шрифтах);
- historical-ligatures / no-historical-ligatures — исторические, редкие (ſi — длинное s);
- contextual / no-contextual — контекстные, где форма буквы зависит от соседних (в скорописных шрифтах). Тоже включены по умолчанию.
Когда лигатуры нужно выключить: в UI с моноширинным шрифтом или в редакторе кода. Например, если у тебя декоративный шрифт для навигации, а в одном из пунктов меню написано fi…, слитая лигатура может ломать выравнивание с иконками. Выключение — font-variant-ligatures: no-common-ligatures.
.code-editor {
/* никаких лигатур — важна одна буква на позицию */
font-variant-ligatures: none;
}
.decorative-heading {
/* включаем всё, что есть в шрифте */
font-variant-ligatures: common-ligatures discretionary-ligatures contextual;
}Отдельное значение none отключает вообще все лигатуры (эквивалент no-common-ligatures no-discretionary-ligatures no-historical-ligatures no-contextual). Полезно для кода и таблиц.
font-variant-alternates, -position, -east-asian, -emoji
Остальные подсвойства нужны реже, но для полноты картины:
- font-variant-alternates — позволяет выбирать stylistic sets и другие альтернативные глифы, определённые в шрифте. Например, у Recursive и Source Sans Pro есть по 4-6 стилистических сетов с разными формами g, a, l. Использование: font-variant-alternates: styleset(2).
- font-variant-position — надстрочные и подстрочные символы: sub и super. По сути замена HTML-тегов <sub> и <sup>, но семантически чище: HTML остаётся плоским, стилизация в CSS.
- font-variant-east-asian — для CJK-шрифтов (китайский, японский, корейский). Управляет вариантами глифов (jis78, jis83, simplified, traditional), шириной символов (full-width, proportional-width) и специальными руби-формами.
- font-variant-emoji — сравнительно новое (2023), задаёт, как рендерить эмодзи: text (в виде монохромного текстового символа), emoji (цветной эмодзи), unicode (по умолчанию шрифта).
Шорт-хэнд font-variant
Само свойство font-variant — это шорт-хэнд, объединяющий все подсвойства выше. Синтаксис довольно гибкий: можно писать одно значение из любого подсвойства (браузер поймёт, к какому оно относится), либо перечислять несколько через пробел.
/* только капитель */
.title { font-variant: small-caps; }
/* капитель + цифры */
.editorial { font-variant: small-caps lining-nums; }
/* всё сбрасываем на дефолт */
.reset { font-variant: normal; }
/* отключаем всё, включая лигатуры */
.plain { font-variant: none; }Разница между normal и none. normal возвращает значения по умолчанию (common-ligatures включены, capitals нет), none отключает всё, включая обычные лигатуры — текст рендерится в «голом» виде, буква за буквой. Полезно для отладки или для кодовых блоков.
Legacy-совместимость. До появления подсвойств font-variant принимал только два значения: normal и small-caps. Именно эта форма встречается в старых стайлгайдах и её до сих пор поддерживают все браузеры — так что font-variant: small-caps работает и как самостоятельная запись, без явного -caps.
Взаимодействие и подводные камни
text-transform: uppercase убивает капитель. Если сначала преобразовать текст в верхний регистр, а потом попросить small-caps — капители не будет: строчных букв уже нет, превращать нечего. Порядок деклараций тут ни на что не влияет; работает по факту рендера. Хочешь капитель — не трогай text-transform.
Зависимость от шрифта. Если шрифт не содержит нужной OpenType-фичи, эффект либо не проявится (браузер тихо проигнорирует), либо будет синтезирован (плохо). Проверить, какие фичи заложены в конкретном шрифте, проще всего через Wakamai Fondue — онлайн-инструмент, куда перетаскиваешь .ttf/.woff2-файл и получаешь полный список поддерживаемых features. Или в DevTools Chrome/Firefox открой панель Fonts на элементе — там видно активные фичи для текущего рендера.
Связь с font-feature-settings. Более низкоуровневое свойство, которое даёт прямой доступ к OpenType-тегам (smcp для small-caps, tnum для tabular-nums и т.д.). font-variant — человекочитаемая обёртка над этим. По спецификации CSS Fonts Level 3 рекомендуется использовать font-variant-свойства везде, где это возможно, а font-feature-settings — только для фич, которых нет в списке подсвойств.
Наследование. Все подсвойства наследуются — поставил font-variant-numeric: tabular-nums на <table>, и все ячейки внутри получат это по умолчанию. Не нужно распределять по каждой <td>.
Отладка «почему не работает». Если задал font-variant-caps: small-caps, а капитель не появилась — чек-лист: (1) не перекрыл ли шорт-хэнд font (тот сбрасывает все подсвойства до normal); (2) содержит ли шрифт капитальное начертание (проверь через Wakamai Fondue); (3) не стоит ли text-transform: uppercase на этом же или родительском элементе; (4) не выключил ли фичу font-synthesis-small-caps: none без наличия настоящей капители в шрифте.
Комментарии (0)