CSS font-style Property

Description

The font-style CSS property is used to specify the style of a font within a text element. It allows web developers to apply three main styles to text: "normal," which is the default style and renders text in a standard upright position; "italic," which slants the text to the right, giving it an inclined appearance; and "oblique," which also slants the text but is typically implemented as a faux italic when the actual italic version of the font is unavailable. Web designers use the font-style property to enhance the visual aesthetics and readability of text content on websites, helping to convey emphasis or convey a specific tone to the reader.

Initial value

normal

Applies to

All elements

Inherited

Yes

Computed value

As specified

Animatable

No

JavaScript syntax

object.style.fontStyle

Syntax

font-style: normal | italic | oblique 

Values

• normalSelects a face that is classified as a normal face, one that is neither italic or obliqued.
• italicSelects a font that is labeled as an italic face, or an oblique face if one is not.
• obliqueSelects a font that is labeled as an oblique face, or an italic face if one is not.
• inherit

Example

<p>The font is displayed in the usual style.</p> 

<p class="test">The font is displayed in italics.</p> 

<p class="test2">The font is displayed as inclined.</p> 

.test {
   font-style: italic;  
}
.test2 {
   font-style: oblique; 
}

Give it a Try

Click the button below to experiment with this property.

Give it a Try!

Browser Support

The following table will show you the current browser support for the CSS font-style property.

Desktop
12	1	1	7	1

Tablets / Mobile
18	4	10.1	1	1	4.4

Last updated by CSSPortal on: 23rd September 2023