Дескриптор CSS-правила `font-style`

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

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

Дескриптор font-style CSS позволяет авторам задавать стили шрифтов, указанных в правиле @font-face.

Для определённого семейства шрифтов авторы могут загрузить различные начертания, соответствующие разным стилям одного семейства, а затем использовать дескриптор font-style, чтобы явно задать стиль начертания. Значения этого дескриптора CSS совпадают со значениями соответствующего свойства font-style.

Синтаксис

font-style: normal;
font-style: italic;
font-style: oblique;
font-style: oblique 30deg;
font-style: oblique 30deg 50deg;

Значения

normal: Выбирает обычную версию семейства шрифтов.
italic: Указывает, что начертание шрифта является курсивной версией обычного шрифта.
oblique: Указывает, что начертание шрифта является искусственно наклонённой версией обычного шрифта.
oblique с углом: Выбирает шрифт, классифицированный как oblique, и дополнительно задаёт угол наклона текста.
oblique с диапазоном углов: Выбирает шрифт, классифицированный как oblique, и дополнительно задаёт допустимый диапазон углов наклона текста. Обратите внимание, что диапазон поддерживается только в том случае, если font-style — oblique; для font-style: normal или italic второе значение не допускается.

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

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

Примеры

Задание курсивного стиля шрифта

Для примера рассмотрим семейство шрифтов garamond в обычном начертании. Получим следующий результат:

@font-face {
  font-family: "garamond";
  src: url("garamond.woff2");
}

unstyled Garamond

В этой курсивной версии текста используются те же глифы, что и в версии без стиля, но они искусственно наклонены на несколько градусов.

artificially sloped garamond

С другой стороны, если существует настоящая курсивная версия семейства шрифтов, мы можем включить её в дескриптор src и указать для стиля шрифта значение italic, чтобы было ясно, что шрифт курсивный. В настоящем курсиве используются другие глифы, и он немного отличается от прямого начертания: у него есть уникальные особенности, а его форма, как правило, более округлая и каллиграфичная. Такие шрифты специально создаются дизайнерами шрифтов и не наклоняются искусственно.

@font-face {
  font-family: "garamond";
  src: url("garamond-italic.woff2");
  font-style: italic;
}

italic garamond

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

Спецификация
Модуль шрифтов CSS уровня 4 # font-prop-desc

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

	Настольные устройства					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari для iOS	Samsung Internet	WebView Android	WebView для iOS
`font-style`	4	12	3.5	10	3.1	18	4	10.1	2	1.0	4.4	2

См. также

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