font-variation-settings

Значение этого свойства может иметь одну из двух форм:

normal

Текст выводится с использованием стандартных настроек.

<string> <number>

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

Это свойство — низкоуровневый механизм, предназначенный для установки характеристик шрифта с переменными размерами, когда нет других способов включения или доступа к этим функциям. Используйте его только тогда, когда нет базовых свойств для установки этих функций (например, font-weight, font-style).

Характеристики шрифта, заданные с помощью font-variation-settings , всегда будут переопределять те, что заданы соответствующими базовыми свойствами шрифта, например font-weight, независимо от их расположения в каскаде. В некоторых браузерах это в настоящее время верно только тогда, когда объявление @font-face включает диапазон font-weight.

Оси шрифтов с переменными размерами бывают двух типов: зарегистрированные и пользовательские.

Зарегистрированные оси наиболее распространены — достаточно распространены, чтобы авторы спецификации сочли их достойными стандартизации. Обратите внимание, что это не означает, что автору нужно включать все эти оси в свой шрифт.

Вот зарегистрированные оси и соответствующие им свойства CSS:

Пользовательские оси могут быть любыми, которые разработчик шрифта хочет изменять в своём шрифте, например, высота восходящих или нисходящих элементов, размер засечек или что-нибудь ещё, что они могут себе представить. Любая ось может быть использована, если ей присвоено уникальное четырёхсимвольное обозначение. Некоторые из них могут стать более распространёнными и даже могут стать зарегистрированными со временем.

Для использования шрифтов с переменными размерами в вашей операционной системе, убедитесь, что она обновлена. Например, операционные системы Linux нуждаются в последней версии Linux Freetype, а macOS до версии 10.13 не поддерживает шрифты с переменными размерами. Если ваша операционная система не обновлена, вы не сможете использовать шрифты с переменными размерами в веб-страницах или инструментах разработчика Firefox.

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

<opentype-tag> = 
  <string>  

Вы можете найти множество других примеров шрифтов с переменными размерами в нашем руководстве по шрифтам с переменными размерами.

Нажмите «Воспроизвести» в блоках кода ниже, чтобы изменить пример в MDN Playground. Измените CSS, чтобы поиграть с различными значениями веса шрифта. Посмотрите, что происходит, когда вы задаёте значение за пределами диапазона веса.

/* weight range is 300 to 900 */
.p1 {
  font-weight: 625;
}

/* weight range is 300 to 900 */
.p2 {
  font-variation-settings: "wght" 625;
}

/* Adjust with slider & custom property */
.p3 {
  font-variation-settings: "wght" var(--text-axis);
}

Нажмите «Воспроизвести» в блоках кода ниже, чтобы изменить пример в MDN Playground. Измените CSS, чтобы поиграть с разными значениями наклона/курсива.

/* slant range is from 0deg to 12deg */
.p1 {
  font-style: oblique 14deg;
}

/* slant range is from 0 to 12 */
.p2 {
  font-variation-settings: "slnt" 12;
}

/* Adjust with slider & custom property */
.p3 {
  font-variation-settings: "slnt" var(--text-axis);
}

• Руководство по шрифтам с переменными размерами
• Обзор вариантов шрифтов OpenType на microsoft.com
• Реестр тегов осей вариации дизайна OpenType на microsoft.com
• Шрифты OpenType с переменными размерами на axis-praxis.org
• Шрифты с переменными размерами на v-fonts.com