font-variation-settings

Описание CSS font-variation-settings позволяет авторам указывать низкоуровневые вариации шрифтов OpenType или TrueType в правиле @font-face. Значения для этого описания такие же, как и для свойства font-variation-settings, за исключением значений ключевого слова global.

Поскольку это описание задаёт значения вариаций для объекта шрифта в правиле @font-face а не для всего элемента, только некоторые глифы в элементе могут быть отображены с использованием этого описания.

Синтаксис

/* Use the default settings */
font-variation-settings: normal;

/* Set values for OpenType axis names */
font-variation-settings: "xhgt" 0.7;

Значения

normal: Текст выводится с использованием стандартных настроек.
<string> <number>: При отрисовке текста список имён осей OpenType передаётся движку форматирования текста для включения или выключения функций шрифта. Каждое значение всегда является <string> из 4 ASCII символов, за которым следует <number>, указывающий значение оси. Если у <string> больше или меньше символов, или оно содержит символы вне диапазона кодов U+20 - U+7E, то всё свойство является некорректным. Значение <number> может быть дробным или отрицательным.

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

Связанное правило at-rule	`@font-face`
Начальное значение	`normal`
Вычисленное значение	указанное значение

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

font-variation-settings = 
  normal                  |
  [ <string> <number> ]#

Примеры

Установка веса и растяжения шрифта в правиле @font-face

@font-face {
  font-family: "OpenTypeFont";
  src: url("open_type_font.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-variation-settings:
    "wght" 400,
    "wdth" 300;
}

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

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

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`font-variation-settings`	Нет	Нет	62	Нет	Нет	Нет	62	Нет	Нет	Нет	Нет

См. также

Другие описания @font-face: font-display, font-family, font-feature-settings, font-stretch, font-style, font-weight, src, unicode-range
Связанные свойства шрифтов: font-feature-settings, font-variation-settings

© 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-face/font-variation-settings