font-variant-alternates

Базовая линия 2023

Новое

С марта 2023 года эта функция работает на последних устройствах и версиях браузеров. Возможно, эта функция не будет работать на старых устройствах или браузерах.

Свойство 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(): Эта функция включает орнаменты, такие как флероны и другие глифы dingbat. Параметр — имя, специфичное для шрифта, сопоставленное с числом. Оно соответствует значению OpenType ornm, например, ornm 2.

Примечание: Чтобы сохранить семантику текста, дизайнеры шрифтов должны включать орнаменты, которые не соответствуют символам dingbat Unicode, как декоративные варианты символа пули (U+2022). Имейте в виду, что некоторые существующие шрифты не следуют этому совету.
annotation(): Эта функция включает аннотации, такие как округлённые цифры или инвертированные символы. Параметр — имя, специфичное для шрифта, сопоставленное с числом. Оно соответствует значению OpenType nalt, например, nalt 2.

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

Начальное значение	`normal`
Применяется к	всем элементам и тексту. Также применяется к `::first-letter` и `::first-line`.
Наследуется	да
Вычисленное значение	как указано
Тип анимации	дискретный

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

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> = 
  <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("montecarlo-regular.woff2");
}

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

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

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

Результат

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

Спецификация
CSS Fonts Module Level 4 # font-variant-alternates-prop

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

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`font-variant-alternates`	111	111	34	97	9.1	111	34	75	9.3	22.0	111
`annotation`	111	111	34	97	16.2	111	34	75	16.2	22.0	111
`character_variant`	111	111	34	97	16.2	111	34	75	16.2	22.0	111
`historical-forms`	111	111	≤72	97	≤13.1	111	79	75	≤13.4	22.0	111
`normal`	111	111	≤72	97	≤13.1	111	79	75	≤13.4	22.0	111
`ornaments`	111	111	34	97	16.2	111	34	75	16.2	22.0	111
`styleset`	111	111	34	97	16.2	111	34	75	16.2	22.0	111
`stylistic`	111	111	34	97	16.2	111	34	75	16.2	22.0	111
`swash`	111	111	34	97	16.2	111	34	75	16.2	22.0	111

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-alternates