CSS-свойство `font-variation-settings`

Свойство font-variation-settings CSS обеспечивает низкоуровневое управление характеристиками вариативного шрифта, позволяя указать четырёхбуквенные имена осей характеристик, которые нужно изменять, а также их значения.

Попробуйте

font-variation-settings: "wght" 50;

font-variation-settings: "wght" 850;

font-variation-settings: "wdth" 25;

font-variation-settings: "wdth" 75;

<section id="default-example">
  <p id="example-element">
    ...it would not be wonderful to meet a Megalosaurus, forty feet long or so,
    waddling like an elephantine lizard up Holborn Hill.
  </p>
</section>

@font-face {
  src: url("/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.woff2");
  font-family: "Amstelvar";
  font-style: normal;
}

p {
  font-size: 1.5rem;
  font-family: "Amstelvar", serif;
}

Синтаксис

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

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

/* Global values */
font-variation-settings: inherit;
font-variation-settings: initial;
font-variation-settings: revert;
font-variation-settings: revert-layer;
font-variation-settings: unset;

Значения

Это свойство задаётся как normal или как список пар «строка — число», разделённых запятыми:

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 |
  [ <string> <number> ]#

Примеры

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

Управление насыщенностью вариативного шрифта (wght)

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

<div>
  <p class="p1">Weight</p>
  <span>(font-weight: 625)</span>
</div>
<div>
  <p class="p2">Weight</p>
  <span>(font-variation-settings: "wght" 625)</span>
</div>
<div class="adjustable">
  <p class="p3">Weight</p>
  (font-variation-settings: "wght" <span id="angle-text">625</span>)<br />
  <label for="text-axis">Adjust Weight: </label>
  <input
    type="range"
    id="text-axis"
    name="text-axis"
    min="300"
    max="900"
    value="625" />
</div>

@font-face {
  font-family: "Amstelvar VF";
  src: url("https://mdn.github.io/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.woff2")
    format("woff2-variations");
  font-weight: 300 900;
  font-stretch: 35% 100%;
  font-style: normal;
  font-display: swap;
}

p {
  font:
    1.2em "Amstelvar VF",
    "Georgia",
    serif;
  font-size: 4rem;
  margin: 1rem;
  display: inline-block;
}

.adjustable {
  border: 1px dashed;
  --text-axis: 625;
}

/* 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);
}

const angle = document.querySelector("#text-axis");
const text = document.querySelector("#angle-text");
const adjustable = document.querySelector(".adjustable");

angle.addEventListener("input", (e) => {
  const angle = e.target.value;
  text.innerText = angle;
  adjustable.style.setProperty("--text-axis", angle);
});

Управление наклоном вариативного шрифта (slnt)

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

<div>
  <p class="p1">Slant</p>
  <span>(font-style: oblique 14deg)</span>
</div>
<div>
  <p class="p2">Slant</p>
  <span>(font-variation-settings: 'slnt' 12)</span>
</div>
<div class="adjustable">
  <p class="p3">Slant</p>
  (font-variation-settings: 'slnt' <span id="angle-text">5</span>)<br />
  <label for="text-axis">Adjust Weight: </label>
  <input
    type="range"
    id="text-axis"
    name="text-axis"
    min="0"
    max="12"
    value="5" />
</div>

@font-face {
  font-family: "Roboto VF";
  src: url("https://mdn.github.io/shared-assets/fonts/variable-fonts/Roboto-VF.woff2")
    format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: oblique 0deg 12deg;
  font-display: swap;
}

p {
  font:
    1.2em "Roboto VF",
    "Helvetica",
    sans-serif;
  font-size: 4rem;
  margin: 1rem;
  display: inline-block;
}

.adjustable {
  border: 1px dashed;
  --text-axis: 5;
}

/* 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);
}

const angle = document.querySelector("#text-axis");
const text = document.querySelector("#angle-text");
const adjustable = document.querySelector(".adjustable");

angle.addEventListener("input", (e) => {
  const angle = e.target.value;
  text.innerText = angle;
  adjustable.style.setProperty("--text-axis", angle);
});

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

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

См. также

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