Свойство CSS `font-variant-alternates`

Свойство font-variant-alternates CSS управляет использованием альтернативных глифов. На эти альтернативные глифы можно ссылаться по альтернативным именам, определенным в @font-feature-values.

Правило @ @font-feature-values можно использовать, чтобы связать для заданного начертания шрифта удобочитаемое имя с числовым индексом, управляющим определенной функцией шрифта OpenType. Для функций, выбирающих альтернативные глифы (stylistic, styleset, character-variant, swash, ornament или annotation), свойство font-variant-alternates может ссылаться на удобочитаемое имя, чтобы применить соответствующую функцию.

Это позволяет включать альтернативные глифы с помощью правил CSS, не зная конкретных значений индексов, которые используются в определенном шрифте для управления ими.

Синтаксис

/* Keyword values */
font-variant-alternates: normal;
font-variant-alternates: historical-forms;

/* Functional notation values */
font-variant-alternates: stylistic(user-defined-ident);
font-variant-alternates: styleset(user-defined-ident);
font-variant-alternates: character-variant(user-defined-ident);
font-variant-alternates: swash(user-defined-ident);
font-variant-alternates: ornaments(user-defined-ident);
font-variant-alternates: annotation(user-defined-ident);
font-variant-alternates: swash(ident1) annotation(ident2);

/* Global values */
font-variant-alternates: inherit;
font-variant-alternates: initial;
font-variant-alternates: revert;
font-variant-alternates: revert-layer;
font-variant-alternates: unset;

Значения

Это свойство задается как normal или как разделенный пробелами список следующих значений:

normal

Это ключевое слово отключает альтернативные глифы.

historical-forms

Это ключевое слово включает исторические формы — глифы, которые были распространены в прошлом, но не используются сегодня. Оно соответствует значению OpenType hist.

stylistic()

Эта функция включает стилистические альтернативы для отдельных символов. Параметр — имя, заданное для конкретного шрифта и сопоставленное с числом. Оно соответствует значению OpenType salt, например salt 2.

styleset()

Эта функция включает стилистические альтернативы для наборов символов. Параметр — имя, заданное для конкретного шрифта и сопоставленное с числом. Оно соответствует значению OpenType ssXY, например ss02.

character-variant()

Эта функция включает определенные стилистические альтернативы для символов. Она похожа на styleset(), но не создает согласованные глифы для набора символов: отдельные символы имеют независимые, не обязательно согласованные стили. Параметр — имя, заданное для конкретного шрифта и сопоставленное с числом. Оно соответствует значению OpenType cvXY, например cv02.

swash()

Эта функция включает глифы с росчерками. Параметр — имя, заданное для конкретного шрифта и сопоставленное с числом. Она соответствует значениям OpenType swsh и cswh, например swsh 2 и cswh 2.

ornaments()

Эта функция включает орнаменты, например флероны и другие глифы-декоративные символы. Параметр — имя, заданное для конкретного шрифта и сопоставленное с числом. Она соответствует значению OpenType ornm, например ornm 2.

Примечание: Чтобы сохранить семантику текста, разработчикам шрифтов следует включать орнаменты, не соответствующие символам Unicode для декоративных знаков, в качестве декоративных вариантов символа маркера списка (U+2022). Обратите внимание, что некоторые существующие шрифты не следуют этой рекомендации.

annotation()

Эта функция включает аннотации, например обведенные кружком цифры или перевернутые символы. Параметр — имя, заданное для конкретного шрифта и сопоставленное с числом. Она соответствует значению OpenType nalt, например nalt 2.

Формальное определение

Формальный синтаксис

font-variant-alternates = 
  normal |
  [ stylistic( <feature-value-name> ) || historical-forms || styleset( <feature-value-name># ) || character-variant( <feature-value-name># ) || swash( <feature-value-name> ) || ornaments( <feature-value-name> ) || annotation( <feature-value-name> ) ]

<feature-value-name> = 
  <custom-ident>

Примеры

Включение глифов с росчерками

В этом примере мы используем правило @ @font-feature-values, чтобы задать имя для функции swash шрифта MonteCarlo. Это правило сопоставляет имя "fancy" со значением индекса 1.

Затем мы можем использовать это имя внутри font-variant-alternates, чтобы включить росчерки для этого шрифта. Это эквивалентно строке вида font-feature-settings: "swsh" 1, за исключением того, что CSS, применяющему эту функцию, не нужно содержать и даже знать значение индекса, необходимое для этого конкретного шрифта.

HTML

<p>A Fancy Swash</p>
<p class="variant">A Fancy Swash</p>

CSS

@font-face {
  font-family: "MonteCarlo";
  src: url("/shared-assets/fonts/monte-carlo/monte-carlo-regular.woff2");
}

@font-feature-values "MonteCarlo" {
  @swash {
    fancy: 1;
  }
}

p {
  font-family: "MonteCarlo", cursive;
  font-size: 3rem;
  margin: 0.7rem 3rem;
}

.variant {
  font-variant-alternates: swash(fancy);
}

Результат

Спецификации

Совместимость с браузерами

См. также

• font-variant
• font-variant-caps
• font-variant-east-asian
• font-variant-emoji
• font-variant-ligatures
• font-variant-numeric
• font-variant-position
• @font-feature-values
• font-feature-settings