skip to main content

font-style

css

Кратко 🔗

Определяет начертание шрифта: обычное, курсивное или наклонное.

Пример 🔗

Попробуем выделить курсивом текст всего абзаца:

HTML

<body>
<h1>Текст ниже мы написали курсивом</h1>
<p>
Этот текст написан курсивом. А мог быть написан наклонным шрифтом, но вы всё
равно бы это не отличили.
</p>
</body>

CSS

body {
font-family: "Roboto", sans-serif; /* Рубленый шрифт */
}
p {
font-style: italic; /* Курсивное начертание */
}

Как это понять 🔗

У большинства шрифтов есть несколько вариантов написания: стандартный, курсивный или жирный. Чтобы задать курсивное написание, используй font-style: italic.

Ещё есть наклонный шрифт, который задаётся через font-style: oblique. Он очень похож на курсив, но по сути, это его имитация, которую используют, если у выбранного шрифта нет курсивного написания. Нужно помнить, что **oblique** может выглядеть хуже по качеству, чем курсивный шрифт. Это особенно заметно при печати страницы.

Как пишется 🔗

Для font-style можно выбрать одно из четырёх значений:

  • normal — обычное начертание текста. Значение по умолчанию.
  • italic — курсивное начертание.
  • oblique — наклонное начертание, которое можно использовать, если у шрифта нет курсивного варианта начертания.
  • inherit — наследует начертание шрифта, которое задано в родительском элементе.
.normal {
font-style: normal;
}

.italic {
font-style: italic;
}

.oblique {
font-style: oblique;
}

В работе 🔗

🛠 Не стоит писать большие части текста курсивом — это сильно усложняет чтение.

🛠 Браузер Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.


Автор: Макс 👨‍🔧