Правило CSS @font-feature-values
At-правило @font-feature-values задаёт имена для возможностей шрифта в свойстве font-variant-alternates. Примеры и описание значений.
At-правило @font-feature-values позволяет присвоить понятное человеку имя числовому индексу возможности OpenType, чтобы при использовании свойства font-variant-alternates можно было обращаться к альтернативным глифам шрифта по имени, а не по числу.
На этой странице объясняется, какую проблему решает это правило, его синтаксис, поддерживаемые блоки возможностей и полный рабочий пример.
Для чего оно нужно
Многие шрифты OpenType поставляются с альтернативными глифами в дополнение к начертанию каждого символа по умолчанию — вензели (декоративные элементы), орнаменты, стилистические варианты, исторические формы и прочее. Внутри шрифта каждый вариант идентифицируется только числом (индексом). Без этого at-правила пришлось бы запоминать, например, что «нарядный вензель имеет индекс 1», и жёстко прописывать это число везде.
@font-feature-values позволяет задать такое соответствие один раз, дать индексу имя, например fancy, а затем вызывать swash(fancy) в CSS. Имя применяется к конкретному семейству шрифтов, поэтому два разных шрифта могут определять собственный вензель fancy, указывающий на разные индексы.
Два важных момента:
- Правило работает исключительно с
font-variant-alternates— на другие свойства оно не влияет. - Оно имеет эффект только в том случае, если соответствующий шрифт действительно загружен и содержит указанные альтернативные глифы. Если нужно управлять низкоуровневыми возможностями OpenType по их четырёхбуквенному тегу, используйте
font-feature-settings.
Правило может располагаться на верхнем уровне таблицы стилей или внутри условного группового at-правила, например @media.
Блоки возможностей
Тело at-правила может содержать любые из следующих именованных блоков, каждый из которых сопоставляет имя с индексом:
@swash@annotation@ornaments@stylistic@styleset@character-variant
Имя каждого блока соответствует одноимённой функциональной нотации в font-variant-alternates (имя из @swash используется функцией swash(), имя из @ornaments — функцией ornaments() и т. д.).
Синтаксис
Синтаксис at-правила CSS @font-feature-values
@font-feature-values <family-name> {
@swash { name: index; }
@annotation { name: index; }
@ornaments { name: index; }
@stylistic { name: index; }
@styleset { name: index; }
@character-variant { name: index; }
}Пример at-правила @font-feature-values:
Пример at-правила CSS @font-feature-values
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
@font-feature-values "Leitura Display Swashes" {
@swash {
fancy: 1;
}
}
p {
font-size: 1.5rem;
}
.variant {
font-family: Leitura Display Swashes;
font-variant-alternates: swash(fancy);
}
</style>
</head>
<body>
<h2>@Font-feature-values at-rule example</h2>
<p>
The font-variant-alternates CSS property controls the usage of alternate glyphs. These alternate glyphs may be referenced by alternative names defined in @font-feature-values.
</p>
<p>This property is supported by Firefox and Safari.</p>
<p class="variant">This property is supported by Firefox and Safari.</p>
</body>
</html>Здесь @swash { fancy: 1; } присваивает индексу 1 шрифта Leitura Display Swashes имя fancy. Абзац .variant затем активирует этот вариант с помощью font-variant-alternates: swash(fancy). Поскольку указанный шрифт в этом примере не загружен, текст отображается стандартным шрифтом и вензели не будут видны — цель примера в том, чтобы показать сам механизм привязки, а не визуальный результат. Подключите нужный шрифт через @font-face, чтобы увидеть альтернативные глифы.
Поддержка браузерами
@font-feature-values поддерживается в Firefox, Safari и Chrome/Edge (Chromium добавил поддержку в версии 128 в августе 2024 года). Internet Explorer никогда не поддерживал это правило. Поскольку альтернативные глифы носят исключительно декоративный характер, использование их как прогрессивного улучшения безопасно: браузеры и шрифты без поддержки этой возможности просто отображают глиф по умолчанию.
Значения
| Значение | Описание |
|---|---|
| @swash | Задаёт имя возможности, которое работает с функциональной нотацией swash() свойства font-variant-alternates. |
| @annotation | Задаёт имя возможности, которое работает с функциональной нотацией annotation() свойства font-variant-alternates. |
| @ornaments | Задаёт имя возможности, которое работает с функциональной нотацией ornaments() свойства font-variant-alternates. |
| @stylistic | Задаёт имя возможности, которое работает с функциональной нотацией stylistic() свойства font-variant-alternates. |
| @styleset | Задаёт имя возможности, которое работает с функциональной нотацией styleset() свойства font-variant-alternates. |
| @character-variant | Задаёт имя возможности, которое работает с функциональной нотацией character-variant() свойства font-variant-alternates. |