font-style

Определяет начертание шрифта — обычное, курсивное или наклонное. Когда для текста установлено курсивное или наклонное начертание, браузер обращается к системе для поиска подходящего шрифта. Если заданный шрифт не найден, браузер использует специальный алгоритм для имитации нужного вида текста.

Краткая информация

Значение по умолчанию normal
Наследуется Да
Применяется Ко всем элементам
Анимируется Нет

Синтаксис

font-style: normal | italic | oblique
Описание Пример
<тип> Указывает тип значения. <размер>
A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,<время>]*
+ Повторять один или больше раз. <число>+
? Указанный тип, слово или группа не является обязательным. inset?
{A, B} Повторять не менее A, но не более B раз. <радиус>{1,4}
# Повторять один или больше раз через запятую. <время>#

Значения

normal
Обычное начертание текста.
italic
Курсивное начертание.
oblique
Наклонное начертание. Курсив и наклонный шрифт при всей их похожести не одно и то же. Курсив это специальный шрифт имитирующий рукописный, наклонный же образуется путём наклона обычных знаков вправо. В зависимости от шрифта вид наклонного начертания может совпадать с курсивным.

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки. 
div {
  font-style: {{ playgroundValue }};
}

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>font-style</title> <style> h1 { font-family: Verdana, Arial, Helvetica, sans-serif; /* Рубленый шрифт заголовка */ } p { font-family: 'Times New Roman', Times, serif; /* Шрифт с засечками */ font-style: italic; /* Курсивное начертание */ } </style> </head> <body> <h1>Культурный памятник Средневековья</h1> <p>Амазонская низменность неумеренно берёт небольшой провоз кошек и собак, а Хайош-Байа славится красными винами. </p> </body> </html>

Результат данного примера показан на рис. 1.

Применение свойства font-style

Рис. 1. Применение свойства font-style

Объектная модель

Объект.style.fontStyle

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

Спецификация Статус
CSS Fonts Module Level 3 Возможная рекомендация
CSS Level 2 (Revision 1) Рекомендация
CSS Level 1 Рекомендация

Браузеры

4 12 1 7 1 1
1 1 6 1

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.
Текст и шрифт