CSS свойство font-style
Свойство CSS font-style задаёт стиль шрифта для текста. Доступны три значения: normal, italic и oblique.
Свойство CSS font-style управляет отображением текста — прямым или наклонным. Оно принимает три ключевых значения: normal, italic и oblique. Это стандартный способ переключить фрагмент текста в наклонный стиль, не меняя гарнитуру или насыщенность шрифта.
На этой странице разбирается, что делает каждое значение, в чём практическая разница между italic и oblique, какой необязательный угол можно передать в oblique, а также типичная проблема, возникающая, когда у шрифта нет настоящего курсивного начертания.
Зачем нужен наклон
Наклонный текст — визуальный сигнал, который читатели распознают мгновенно: он обозначает выделение, названия произведений, иностранные фразы или технические термины. Использование font-style (а не, например, ручного перекоса текста) сохраняет это значение в CSS, поэтому оно остаётся корректным при смене шрифтов, изменении масштаба и в вспомогательных технологиях.
Есть два различных способа, которыми дизайнеры шрифтов создают наклон буквы:
- Italic — это отдельный, курсивный дизайн: формы букв перерисовываются, а не просто наклоняются. Настоящая курсивная
aнередко заметно отличается от прямой. - Oblique — это прямой дизайн, механически наклонённый на несколько градусов. Формы букв остаются теми же, они просто накренены.
Когда вы пишете font-style: italic, браузер сначала ищет настоящее курсивное начертание в семействе шрифтов. Если семейство его не предоставляет, браузер синтезирует наклон — что по сути даёт тот же результат, что и oblique. Именно поэтому у многих веб-шрифтов italic и oblique выглядят одинаково.
| Начальное значение | normal |
|---|---|
| Применяется к | Всем элементам. Также применяется к ::first-letter и ::first-line. |
| Наследуется | Да. |
| Анимируемо | Нет. |
| Версия | CSS1 |
| DOM Syntax | object.style.fontStyle = "oblique"; |
Синтаксис
font-style: normal | italic | oblique | initial | inherit;Ключевое слово oblique также принимает необязательный угол от -90deg до 90deg, что позволяет точно контролировать степень наклона текста:
font-style: oblique 14deg;Если угол не указан, браузеры используют наклон по умолчанию — около 14deg.
Пример со значением normal
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h3.normal {
font-style: normal;
}
</style>
</head>
<body>
<h2>Font-style property example</h2>
<h3 class="normal">We wrote this text as normal.</h3>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</body>
</html>Разница между italic и oblique
Как описано выше, italic запрашивает специально разработанный курсивный дизайн шрифта, тогда как oblique запрашивает наклонную версию прямого дизайна. Если шрифт поставляется с обоими начертаниями, они могут заметно различаться; если только с одним — браузер синтезирует второе, и они выглядят одинаково. Пример ниже отображает оба варианта рядом:
Пример со значениями italic и oblique
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<h2>Font-style property example</h2>
<p class="italic">We wrote this text as italic.</p>
<p class="oblique">We wrote this text as oblique.</p>
</body>
</html>Пример со всеми значениями
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<h2>Font-style property example</h2>
<p class="normal">We wrote this text as normal.</p>
<p class="italic">We wrote this text as italic.</p>
<p class="oblique">We wrote this text as oblique.</p>
</body>
</html>Значения
| Значение | Описание | Пример |
|---|---|---|
| normal | Текст отображается в обычном стиле. Это значение по умолчанию. | Play it » |
| italic | Текст отображается курсивом. | Play it » |
| oblique | Текст отображается наклонным. | Play it » |
| initial | Устанавливает свойство в значение по умолчанию. | Play it » |
| inherit | Наследует свойство от родительского элемента. |
Типичная проблема: шрифты без курсивного начертания
Не каждое семейство шрифтов содержит настоящий курсив. Когда вы применяете font-style: italic к такому шрифту, браузер имитирует наклон, перекашивая прямые глифы. Результат обычно приемлем, но выглядит чуть менее аккуратно, чем разработанный курсив. Если курсив важен для вашей типографики, убедитесь, что загружаемый шрифт действительно поставляется с курсивным файлом (а для вариативных шрифтов — что ось italic присутствует), и подключите этот вариант вместе с обычным.
Чтобы убрать наклон, унаследованный от родителя — например, оставить слово прямым внутри элемента <em> или <i> — установите значение обратно в normal:
em.upright {
font-style: normal;
}Связанные свойства
font-style — одна из составляющих объявления шрифта. Остальные рассматриваются в этих разделах:
- CSS font-weight — управляет насыщенностью, другим распространённым способом выделения.
- CSS font-family — выбирает гарнитуру, от которой зависит наличие настоящего курсива.
- CSS font-size — задаёт размер текста.
- CSS font — сокращённое свойство, задающее
font-style,font-weight,font-sizeи другие параметры одновременно. - CSS text-decoration — ещё один способ выделить текст: подчёркиванием и линиями.