font-style это CSS-свойство определяющее каким образом шрифт должен быть стилизирован, будь то это normal, italic, или oblique face из егоfont-family.

Интерактивный пример

font-style: normal;

font-style: italic;

font-style: oblique;

font-style: oblique 40deg;

<section>  <p>    London. Michaelmas term lately over, and the Lord Chancellor sitting in    Lincoln's Inn Hall. Implacable November weather. As much mud in the streets    as if the waters had but newly retired from the face of the earth, and 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.ttf");  font-family: Amstelvar;  font-style: normal;}section {  font-size: 1.2em;  font-family: Amstelvar;}

Italic шрифты в общем курсивные по своей сути, обычно занимают меньше горизонтального пространства чем их нестилизированные копии, тогда какoblique шрифты обычно просто наклонная версия регулярного шрифта. Когда определённый стиль не доступен, оба italic и oblique шрифты симулируются искусственно наклоняя глифы регулярного шрифта (используйтеfont-synthesis для управления этим поведением).

Syntax

font-style: normal;font-style: italic;font-style: oblique;/* Глобальные значения */font-style: inherit;font-style: initial;font-style: unset;

Свойствоfont-style определяется как единственное ключевое слово выбранное из списка значений внизу.

Values

normal

Выделяет шрифт который классифицирован какnormal вfont-family.

italic

Выделяет шрифт который классифицирован какitalic. Если не доступна курсивная версия шрифта, взамен используетсяoblique классификация. Если не одна версия не доступна, то стиль симулируется искусственно.

oblique

Выделяет шрифт который классифицирован какoblique. Если не доступна косая версия шрифта, взамен используетсяitalic классификация. Если не одна версия не доступна, то стиль симулируется искусственно.

Formal definition

Formal syntax

font-style =
normal|
italic|
left|
right|
oblique<angle [-90deg,90deg]>?

Examples

Font styles

<p>This paragraph is normal.</p><p>This paragraph is italic.</p><p>This paragraph is oblique.</p>

.normal {  font-style: normal;}.italic {  font-style: italic;}.oblique {  font-style: oblique;}

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

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