CSS свойство font-variant-alternates
Свойство CSS font-variant-alternates отвечает за выбор альтернативных глифов. Смотрите значения и примеры.
CSS-свойство font-variant-alternates управляет выбором альтернативных глифов — особых начертаний символов (росчерки, орнаменты, стилистические наборы, исторические формы и т. д.), которые шрифт OpenType может предоставлять в дополнение к стандартным символам.
На этой странице объясняется, что такое альтернативные глифы, как их включать, как каждая функция соотносится с возможностями OpenType и на что обращать внимание при использовании.
Зачем нужны альтернативные глифы?
Многие высококачественные шрифты OpenType содержат дополнительные версии отдельных букв. Росчерк может добавить декоративный элемент к заглавной букве; стилистический набор может переключить целое семейство букв на каллиграфический облик; исторические формы позволяют вернуть длинное «ſ», использовавшееся в старинном наборе. По умолчанию браузер отображает стандартный глиф — font-variant-alternates позволяет подключить альтернативные начертания без необходимости знать низкоуровневые теги OpenType-функций.
Это свойство применяется тогда, когда нужна типографская выразительность (логотипы, заголовки, представительский текст), а выбранный шрифт действительно содержит альтернативные глифы. Если шрифт не имеет альтернатив, свойство не даёт видимого эффекта.
Принцип работы: @font-feature-values
Большинство функций, описанных ниже (stylistic(), styleset(), character-variant(), swash(), ornaments(), annotation()), принимают имя, а не число. Эти читаемые имена определяются один раз с помощью at-правила @font-feature-values, а затем используются в таблице стилей. Такой подход позволяет давать осмысленные имена — например, fancy или circled — непрозрачным индексам функций, которые предоставляет шрифт.
/* 1. Map a readable name to a feature index, per font family */
@font-feature-values "Leitura Display Swashes" {
@swash { fancy: 1; }
}
/* 2. Reference the name in font-variant-alternates */
.title {
font-family: "Leitura Display Swashes";
font-variant-alternates: swash(fancy);
}Исключение составляет historical-forms — это простое ключевое слово, и оно не требует записи в @font-feature-values.
| Начальное значение | normal |
|---|---|
| Применяется к | Всем элементам. Также применяется к ::first-letter и ::first-line. |
| Наследуется | Да. |
| Анимируемо | Нет. |
| Версия | CSS3 |
| DOM-синтаксис | object.style.fontVariantAlternates = "normal"; |
Синтаксис
Синтаксис CSS-свойства font-variant-alternates
font-variant-alternates: normal | historical-forms | stylistic() | styleset() | character-variant() | swash() | ornaments() | annotation();Пример свойства font-variant-alternates:
Пример CSS-свойства font-variant-alternates
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
@font-feature-values "Leitura Display Swashes" {
@swash {
fancy: 1;
}
}
p {
font-size: 2rem;
}
.variant {
font-family: Leitura Display Swashes;
font-variant-alternates: swash(fancy);
}
</style>
</head>
<body>
<h2>Font-variant-alternates property example</h2>
<p>This paragraph uses the swash alternate.</p>
<p class="variant">This paragraph uses the swash alternate.</p>
</body>
</html>Результат
Значения
| Значение | Описание |
|---|---|
| normal | Ни одна функция не включена. |
| historical-forms | Включает отображение исторических форм. |
| stylistic() | Включает отображение стилистических альтернатив. |
| styleset() | Включает отображение со стилистическими наборами. |
| character-variant() | Включает определённые стилистические альтернативы для символов. |
| swash() | Включает глифы с росчерками. |
| ornaments() | Включает отображение орнаментов. |
| annotation() | Включает альтернативные формы аннотаций. |
| initial | Устанавливает для свойства значение по умолчанию. |
| inherit | Наследует свойство от родительского элемента. |
Несколько функций можно объединить в одном объявлении, разделив их пробелами — например font-variant-alternates: stylistic(alt-a) styleset(my-set);. Только специальное ключевое слово normal нельзя смешивать с функциями.
Соответствие функций возможностям OpenType
Если вы использовали низкоуровневый подход font-feature-settings, в этой таблице показано, какой функции OpenType соответствует каждая из них:
| Функция | Возможность OpenType | Типичное применение |
|---|---|---|
historical-forms | hist | Длинное «ſ», архаичные начертания букв. |
stylistic() | salt | Один альтернативный глиф, выбранный по имени. |
styleset() | ss01–ss20 | Скоординированный набор альтернатив. |
character-variant() | cv01–cv99 | Постимвольные альтернативы, задаваемые независимо друг от друга. |
swash() | swsh / cswh | Декоративные росчерки на буквах. |
ornaments() | ornm | Символы-украшения и декоративные знаки. |
annotation() | nalt | Цифры и буквы в кружке или рамке. |
Нюансы применения
- Шрифт должен содержать альтернативу. Если активный шрифт не имеет росчерков или стилистических наборов, свойство молча не даёт никакого эффекта — запасного глифа просто не существует.
- Имена должны быть объявлены заранее. Функция вроде
swash(fancy)работает только в том случае, еслиfancyсопоставлено в блоке@font-feature-valuesдля соответствующегоfont-family. - Свойство наследуется. Поскольку свойство наследуется, задавайте его на минимально необходимом элементе (или сбрасывайте на
normalдля дочерних элементов), чтобы декоративные глифы не проникали в окружающий текст.
Связанные свойства
font-variant— сокращённое свойство, объединяющее все длинные вариантыfont-variant-*.@font-feature-values— определяет читаемые имена, на которые ссылается это свойство.font-family— выбирает шрифт, предоставляющий альтернативы.
Совместимость с браузерами
| Браузер | Поддержка |
|---|---|
| Chrome | 36+ |
| Edge | 79+ |
| Firefox | 34+ |
| Safari | 10+ |
| Opera | 23+ |