CSS propertyTypography
font-style
Turns on italics or an oblique slant for text.
- Initial value
normal- Inherited
- Yes
- Animatable
- only the oblique tilt angle
- Applies to
- all elements
- JavaScript
element.style.fontStyle = "italic"
Example
#CSS
blockquote {
font-style: italic;
}
blockquote cite {
font-style: normal;
}Example HTML
<blockquote style="font-style: italic; margin: 0">
"The best way to learn to code is to code."
<cite style="font-style: normal; display: block; margin-top: 6px; color: #a3a3a3;">CodeWorlds Mentor</cite>
</blockquote>Preview
Definition and usage
#The font-style property chooses an upright, italic, or oblique style. italic uses true italics, meaning separately designed characters. oblique is a slanted version of the regular characters, optionally with a given angle.
If a font has no italic version, the browser slants the regular characters automatically. The result is usually less elegant than true italics.
The <em> and <i> tags default to font-style: italic. The normal value is useful when you want to turn that italic off.
Syntax
#Syntax
font-style: normal | italic | oblique <angle>?;Values
#- A regular, upright style with no slant.
- True italics, designed as part of the font.
- A slanted version of the regular characters.
- A slant at the given angle, if the font supports it.
Values in practice
#normal
A regular, upright style with no slant.
.demo { font-style: normal; }italic
True italics, designed as part of the font.
.demo { font-style: italic; }oblique
A slanted version of the regular characters.
.demo { font-style: oblique; }oblique 20deg
A slant at the given angle, if the font supports it.
.demo { font-style: oblique 20deg; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Italics are harder to read. Use them for short emphasis, not entire paragraphs.
- If you load a custom font, load its italic version too, instead of relying on a faked slant.
Related entries
#Spotted a mistake or missing an example? Write to us.