font-style

Шрифт Широко доступен

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

Дескриптор CSS font-style позволяет авторам указывать стили шрифтов для шрифтов, указанных в правиле @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, второе значение не допускается.

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

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

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

font-style = 
  auto                                      |
  normal                                    |
  italic                                    |
  oblique [ <angle [-90deg,90deg]>{1,2} ]?

Примеры

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

В качестве примера рассмотрим семейство шрифтов Garamond в его нормальной форме, мы получим следующий результат:

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

unstyled Garamond

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

artificially sloped garamond

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

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

italic garamond

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

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

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

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

См. также

© 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-style