Свойство CSS `font-style`

Свойство CSS font-style CSS определяет, следует ли отображать шрифт обычным, курсивным или наклонным начертанием из font-family.

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

Попробуйте

font-style: normal;

font-style: italic;

font-style: oblique;

font-style: oblique 40deg;

<section id="default-example">
  <p id="example-element">
    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.woff2");
  font-family: "Amstelvar";
  font-style: normal;
}

section {
  font-size: 1.2em;
  font-family: "Amstelvar", serif;
}

Синтаксис

font-style: normal;
font-style: italic;
font-style: oblique;
font-style: oblique 10deg;

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

Значения

Для этого свойства указывается одно из следующих ключевых слов. За ключевым словом oblique при необходимости может следовать <angle>:

normal

Выбирает шрифт, классифицированный как normal в рамках font-family.

italic

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

oblique

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

oblique <angle>

Выбирает шрифт, классифицированный как oblique, и дополнительно задаёт угол наклона текста. Если в выбранном семействе шрифтов доступны одно или несколько наклонных начертаний, выбирается то, которое наиболее точно соответствует указанному углу. Если наклонные начертания недоступны, браузер создаёт наклонную версию шрифта, наклоняя обычное начертание на заданную величину. Допустимы значения в градусах от -90deg до 90deg включительно. Если угол не указан, используется угол 14 градусов. Положительные значения наклоняют текст к концу строки, а отрицательные — к её началу.

Как правило, если запрошен угол 14 градусов или больше, предпочтение отдаётся большим углам; в противном случае предпочтение отдаётся меньшим (точный алгоритм описан в разделе спецификации о подборе шрифтов).

Модуль CSS Fonts также определяет значения left и right для выбора курсивного или наклонного начертания с заданным направлением наклона; однако эти значения не поддерживаются ни одним браузером.

Переменные шрифты

Переменные шрифты позволяют точно управлять степенью наклона наклонного начертания. Для этого можно использовать модификатор <angle> с ключевым словом oblique.

В переменных шрифтах TrueType или OpenType вариация "slnt" используется для задания различных углов наклона, а вариация "ital" со значением 1 — для реализации курсивных значений. См. font-variation-settings.

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

<p class="sample">
  ...it would not be wonderful to meet a Megalosaurus, forty feet long or so,
  waddling like an elephantine lizard up Holborn Hill.
</p>

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

.sample {
  font:
    2rem "AmstelvarAlpha",
    sans-serif;
  /* font-variation-settings: "slnt" 12; */
  font-style: oblique 23deg;
}

Доступность

Большие фрагменты текста, заданные значением italic для font-style, могут быть трудны для чтения людям с когнитивными особенностями, например с дислексией.

• MDN: разъяснения к руководству WCAG 1.4
• W3C: понимание WCAG 2.2

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

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

font-style = 
  normal |
  italic |
  oblique <angle>?

Примеры

Стили шрифтов

<p class="normal">This paragraph is normal.</p>
<p class="italic">This paragraph is italic.</p>
<p class="oblique">This paragraph is oblique.</p>

.normal {
  font-style: normal;
}

.italic {
  font-style: italic;
}

.oblique {
  font-style: oblique;
}

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

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

См. также

• font-family
• font-weight
• Атрибут font-style в SVG
• Узнайте: основы оформления текста и шрифтов