CSS font-style property

 The function of the CSS font-style property is to design the italic, italic and other font styles of webpage text. The actual effect is similar to the HTML <i></i> tag. Simply put, it is the italic effect of webpage text in CSS. The CSS font-style property provides two similar italics setting methods, both of which are supported by most mainstream browsers.

CSS font-style syntax rules

font-style: font style setting value;

There are several available settings for the CSS font-style property. The more useful ones are italic and oblique. Other settings are listed in the table below:

Available settings for the CSS font-style property

Set value	Description
normal	The default value allows the browser to display the font according to the standard text style.
italic	Set the text style to italics.
oblique	Set the text style to italic, which is almost the same as italic.
initial	Set the text style to the default value.
inherit	The font-style style setting inherited from the parent layer is not supported by all browsers and is not recommended.

CSS font-style property example

<span style="font-style:normal;">This is the normal font effect of font-style</span><br>
<span style="font-style:italic;">This is the italic font of font-style Effect</span><br>
<span style="font-style:oblique;">This is the oblique font effect of font-style</span><br>
<i>This is the italic effect of traditional HTML< /i>

Visual effects of the example

This is the normal font effect
of font-style This is the italic font effect
of font-style This is the oblique font effect of font-style
This is the italic effect of traditional HTML

There are three lines of different font-style effects in the example. The first line uses normal and the result is no special effect. The second and third lines use font-style italic and oblique respectively, and the results show italics. The effect, and both English words and Chinese fonts are rendered in italics. The last line shows the italic effect of traditional HTML . In fact, whether you use CSS font-style or HTML <i></i>, you can design the italic effect, but CSS is managed in larger projects More efficient.