The CSS font-style property specifies the desired font appearance, such as italic, oblique, or normal. It is applied to determine the font style for the textual content within an HTML element.
Syntax
font-style: normal | italic | oblique | initial | inherit;
Property Values
The values for this CSS property are organized in the table below:
| Keyword | Description |
|---|---|
| normal | This is the default value. Using this value, the browser will display the normal font text. |
| italic | This property value of the font-style property is used to make the font italic. Italic fonts are the cursive versions of the font. |
| oblique | This property value of the font-style property is used to make the font oblique. Oblique fonts are the sloped versions of the font. |
| initial | Using this value, the browser will display the initial font style that is the default. Basically, this value sets the property to its default value. |
| inherit | It inherits the property from its parent element. |
If the given font-family has an embedded oblique or italic font face, the browser will select that face. If there is no oblique or italic face is available, the browser will mimic the sloping effect. If we define the italic value, and there is no italic face is available, the browser will check the oblique face before trying to mimic the italic.
The identical procedure will be followed for the slanted font style; in cases where a slanted face is not present, the browser will initially look for an italic typeface before attempting to imitate the slanted appearance.
To avoid a browser from automatically generating a simulated version of the slanted or italic style, we can make use of the font-synthesis property if it is compatible.
Let's explore the aforementioned property values through an illustration.
Example
In this instance, we are utilizing all the values associated with the font-style property.
<!DOCTYPE html>
<html>
<head>
<style>
p
{
font-size: 200%;
}
</style>
</head>
<body>
<p> This is an example of using the font-style property in CSS. </p>
<h2 style = "font-style : normal;"> font-style : normal; This heading is shown in normal font. </h2>
<h2 style = "font-style : italic;"> font-style : italic; This heading is shown in italic font. </h2>
<h2 style = "font-style : oblique;"> font-style : oblique; This heading is shown in oblique font. </h2>
</body>
</html>
Output: