font-variation-settings
Задаёт оси вариативного шрифта напрямую — насыщенность, ширину, наклон или собственные оси шрифта — любым числом, а не фиксированными шагами.
Синтаксис
font-variation-settings: "wght" 650, "wdth" 90;Значения
| Параметр | Тип | Описание |
|---|---|---|
| "axis" number | axis value | Четырёхбуквенное имя оси в кавычках и значение: `"wght"` насыщенность, `"wdth"` ширина, `"slnt"` наклон, `"opsz"` оптический размер; собственные оси пишутся заглавными буквами. |
| normal | keyword | По умолчанию: значения самого шрифта. |
Примеры
Насыщенность плавно меняется при наведении (заметно, если системный шрифт вариативный, как в актуальных Windows и macOS):
<style>
.title {
font-family: system-ui, sans-serif; font-size: 32px;
font-variation-settings: "wght" 300;
transition: font-variation-settings 0.4s;
}
.title:hover { font-variation-settings: "wght" 850; }
</style>
<p class="title">Hover over me</p>Примечания
Для стандартных осей лучше обычные свойства: font-weight: 650 вместо "wght", font-stretch вместо "wdth", font-style: oblique 10deg вместо "slnt". Они правильно сочетаются с другими стилями, а font-variation-settings перекрывает всё целиком и не наследуется по отдельным осям. Используйте его для собственных осей шрифта. Если такой оси у шрифта нет, ничего не изменится.
См. также
- font-weight — Насыщенность (жирность) шрифта.
- @font-face — Подключает шрифт и даёт ему имя для использования в `font-family`.
- font-family — Семейство шрифта со списком запасных вариантов.
- transition — Плавно анимирует изменение свойства от старого значения к новому.
Вопросы и ответы по теме
В учебнике
- Веб-шрифты — Как подключить свой шрифт — правило @font-face, формат woff2, font-display, вариативные шрифты, Google Fonts с preconnect, запасные шрифты и выбор между своим сервером и CDN.