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

Определение и применение

CSS свойство font-style задает стиль шрифта для элемента.

Попробуйте значения font-style

Сравните обычное и наклонное начертание. Вид italic и oblique зависит от доступного шрифта.

Значение свойства

font-style: normal

HTML и CSS примера
HTML
<div class="demo-target">
  Изучаем CSS: оформление текста помогает читать и понимать страницу.
</div>
CSS
.demo-target {
  box-sizing: border-box;
  width: 100%;
  max-width: 300px;
  padding: 16px;
  border: 2px solid #245a85;
  background: #fff3d6;
  color: #172c3d;
  font: 18px/1.5 system-ui;
  font-style: normal;
}

Поддержка браузерами

Спецификация: CSS fonts

Поддерживается во всех основных браузерах с 2015 года.

Отдельные значения (1) поддерживаются не везде — смотрите таблицу.

Показать браузеры
Совместимостьcss.properties.font-style
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
font-style✓1✓12✓1✓7✓1✓18✓4✓10.1✓1✓1.0✓4.4✓1
italic✓1✓12✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1
normal✓1✓12✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1
oblique✓1✓12✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1
oblique-angle◐62◐79✓61◐49◐11.1◐62✓61◐46◐11.3◐8.0◐62◐11.3

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS
font-style: normal | italic | oblique <angle>?;

/* Глобальные значения */
font-style: initial | inherit | unset | revert | revert-layer;

| — выбор варианта; ? — необязательная часть.

JavaScript синтаксис:

JavaScript
element.style.fontStyle = "oblique";

Начальное значение свойства

normal.

Значения свойства

Значения font-style
Значение Описание
normal Шрифт отображается обычным стилем. Начальное значение.
italic Задает курсивный стиль шрифта.
oblique Выбирает наклонное начертание. Оно может быть отдельным начертанием шрифта или синтезированным браузером наклоном. italic запрашивает курсивное начертание, у которого может отличаться сама форма букв; при отсутствии нужного начертания возможна подстановка.
oblique <angle> Наклон с углом от -90deg до 90deg; без угла используется 14deg. Наличие вариативного наклона зависит от шрифта.
initial Устанавливает начальное значение свойства.
inherit Наследует вычисленное значение свойства у родительского элемента.
unset Для наследуемого свойства font-style наследует вычисленное значение у родительского элемента.
revert Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
revert-layer Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

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

CSS Fonts — спецификация font-style.

Наследуется

Да.

Анимируемое

По вычисленному значению; угол oblique интерполируется, normal соответствует нулевому наклону. Несовместимые варианты переключаются дискретно.

Примеры, попробуйте сами

Наклон шрифта

Замените italic на oblique, затем на normal. Вид наклона зависит от доступного шрифта.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
section {
    margin-bottom: 24px;
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Наклон шрифта</title>
  </head>
  <body>
    <section>
      <h3>Вариант A</h3>
      <div class="sample first">
        Учебный текст помогает увидеть изменение свойства. Сравните строки, расстояния и положение содержимого. Учебный
        текст помогает увидеть изменение свойства. Сравните строки, расстояния и положение содержимого.
      </div>
    </section>
    <section>
      <h3>Вариант B</h3>
      <div class="sample second">
        Учебный текст помогает увидеть изменение свойства. Сравните строки, расстояния и положение содержимого. Учебный
        текст помогает увидеть изменение свойства. Сравните строки, расстояния и положение содержимого.
      </div>
    </section>
  </body>
</html>
style.css
CSS
.first {
    font-style: normal;
}
.second {
    font-style: italic;
}