Правило CSS `@font-feature-values`

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в разных версиях браузеров. Она доступна во всех браузерах с марта 2023 года.

@font-feature-values CSS-правило позволяет использовать общее имя в свойстве font-variant-alternates для функций, которые активируются по-разному в OpenType. Это может упростить CSS при использовании нескольких шрифтов.

Правило @font-feature-values можно использовать как на верхнем уровне CSS, так и внутри любого правила условной группы CSS.

Синтаксис

@font-feature-values Font Name {
  font-display: swap;
  @styleset {
    nice-style: 12;
  }
  @swash {
    fancy: 2;
  }
}

Каждый блок @font-feature-values может содержать список блоков значений функций (перечисленных ниже), а также дескриптор font-display.

Блоки значений функций

@swash: Задает имя функции, которая будет работать с функциональной нотацией swash() свойства font-variant-alternates. Определение значения функции swash допускает только одно значение: ident1: 2 допустимо, а ident2: 2 4 — нет.
@annotation: Задает имя функции, которая будет работать с функциональной нотацией annotation() свойства font-variant-alternates. Определение значения функции annotation допускает только одно значение: ident1: 2 допустимо, а ident2: 2 4 — нет.
@ornaments: Задает имя функции, которая будет работать с функциональной нотацией ornaments() свойства font-variant-alternates. Определение значения функции ornaments допускает только одно значение: ident1: 2 допустимо, а ident2: 2 4 — нет.
@stylistic: Задает имя функции, которая будет работать с функциональной нотацией stylistic() свойства font-variant-alternates. Определение значения функции stylistic допускает только одно значение: ident1: 2 допустимо, а ident2: 2 4 — нет.
@styleset: Задает имя функции, которая будет работать с функциональной нотацией styleset() свойства font-variant-alternates. Определение значения функции styleset допускает неограниченное количество значений: ident1: 2 4 12 1 соответствует значениям OpenType ss02, ss04, ss12 и ss01. Обратите внимание: значения выше 99 допустимы, но не соответствуют значениям OpenType и игнорируются.
@character-variant: Задает имя функции, которая будет работать с функциональной нотацией character-variant() свойства font-variant-alternates. Определение значения функции character-variant допускает одно или два значения: ident1: 3 соответствует cv03=1, а ident2: 2 4 соответствует cv02=4, но ident2: 2 4 5 недопустимо.

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

Примеры

Использование @styleset в правиле @font-feature-values

/* At-rule for "nice-style" in Font One */
@font-feature-values Font One {
  @styleset {
    nice-style: 12;
  }
}

/* At-rule for "nice-style" in Font Two */
@font-feature-values Font Two {
  @styleset {
    nice-style: 4;
  }
}

/* Apply the at-rules with a single declaration */
.nice-look {
  font-variant-alternates: styleset(nice-style);
}

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

Спецификация
CSS Fonts Module Level 4 # font-feature-values

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

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari на iOS	Samsung Internet	WebView для Android	WebView на iOS
`font-feature-values`	111	111	34	97	9.1	111	34	75	9.3	22.0	111	9.3
`annotation`	111	111	34	97	9.1	111	34	75	9.3	22.0	111	9.3
`character-variant`	111	111	34	97	9.1	111	34	75	9.3	22.0	111	9.3
`historical-forms`	111	111	34	97	9.1	111	34	75	9.3	22.0	111	9.3
`ornaments`	111	111	34	97	9.1	111	34	75	9.3	22.0	111	9.3
`styleset`	111	111	34	97	9.1	111	34	75	9.3	22.0	111	9.3
`stylistic`	111	111	34	97	9.1	111	34	75	9.3	22.0	111	9.3
`swash`	111	111	34	97	9.1	111	34	75	9.3	22.0	111	9.3

См. также

Свойство font-variant-alternates, использующее значения, определяемые этим правилом.

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@font-feature-values