Свойство CSS font-style
Свойство font-style определяет стиль шрифта для текста. Свойство принимает три значения: normal, italic и oblique.
Italic — это курсивный стиль шрифта, а oblique — наклонная версия стандартного начертания.
| Начальное значение | normal |
|---|---|
| Применяется к | Ко всем элементам. Также применяется к ::first-letter и ::first-line. |
| Наследуется | Да. |
| Анимация | Нет. |
| Версия | CSS1 |
| Синтаксис DOM | object.style.fontStyle = "oblique"; |
Синтаксис
Синтаксис свойства CSS font-style
css
font-style: normal | italic | oblique | initial | inherit;Пример использования свойства font-style:
Пример использования свойства font-style:
html
<!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:
Пример свойства font-style со значениями "italic" и "oblique":
Пример использования свойства font-style со значениями "italic" и "oblique":
html
<!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>Пример свойства font-style со всеми значениями:
Пример использования свойства font-style со всеми значениями:
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 | Текст будет отображаться обычным шрифтом. Это значение по умолчанию. | Запустить » |
| italic | Текст будет отображаться курсивом. | Запустить » |
| oblique | Текст будет отображаться наклонным шрифтом. | Запустить » |
| initial | Устанавливает для свойства значение по умолчанию. | Запустить » |
| inherit | Наследует значение свойства от родительского элемента. |
Практика
Как можно использовать свойство font-style в CSS?