font-style
Quick Summary for font-style
The font-style CSS property sets whether a font should be styled with a normal, italic, or oblique face from its font-family.
Code Usage for font-style
font-style: normal; font-style: italic; font-style: oblique; font-style: oblique 10deg;  /* Global values */ font-style: inherit; font-style: initial; font-style: revert; font-style: unset; 
More Details for font-style

font-style

The font-style CSS property sets whether a font should be styled with a normal, italic, or oblique face from its font-family.

Italic font faces are generally cursive in nature, usually using less horizontal space than their unstyled counterparts, while oblique faces are usually just sloped versions of the regular face. When the specified style is not available, both italic and oblique faces are simulated by artificially sloping the glyphs of the regular face (use font-synthesis to control this behavior).

Syntax

font-style: normal; font-style: italic; font-style: oblique; font-style: oblique 10deg;  /* Global values */ font-style: inherit; font-style: initial; font-style: revert; font-style: unset; 

The font-style property is specified as a single keyword chosen from the list of values below, which can optionally include an angle if the keyword is oblique.

Values

normal

Selects a font that is classified as normal within a font-family.

italic

Selects a font that is classified as italic. If no italic version of the face is available, one classified as oblique is used instead. If neither is available, the style is artificially simulated.

oblique

Selects a font that is classified as oblique. If no oblique version of the face is available, one classified as italic is used instead. If neither is available, the style is artificially simulated.

oblique <angle>

Selects a font classified as oblique, and additionally specifies an angle for the slant of the text. If one or more oblique faces are available in the chosen font family, the one that most closely matches the specified angle is chosen. If no oblique faces are available, the browser will synthesize an oblique version of the font by slanting a normal face by the specified amount. Valid values are degree values of -90deg to 90deg inclusive. If an angle is not specified, an angle of 14 degrees is used. Positive values are slanted to the end of the line, while negative values are slanted towards the beginning.

In general, for a requested angle of 14 degrees or greater, larger angles are preferred; otherwise, smaller angles are preferred (see the spec's font matching section for the precise algorithm).

Variable fonts

Variable fonts can offer a fine control over the degree to which an oblique face is slanted. You can select this using the <angle> modifier for the oblique keyword.

For TrueType or OpenType variable fonts, the "slnt" variation is used to implement varying slant angles for oblique, and the "ital" variation with a value of 1 is used to implement italic values. See font-variation-settings.

Note: For the example below to work, you'll need a browser that supports the CSS Fonts Level 4 syntax in which font-style: oblique can accept an <angle>. The demo loads with font-style: oblique 23deg;. Change the value to see the slant of the text change.

Accessibility concerns

Large sections of text set with a font-style value of italic may be difficult for people with cognitive concerns such as Dyslexia to read.

MDN Understanding WCAG, Guideline 1.4 explanations W3C Understanding WCAG 2.1

Formal definition

Initial valuenormal
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedyes
Computed valueas specified
Animation typediscrete

Formal syntax

normal | italic | oblique <angle>?

Examples

Font styles

.normal {   font-style: normal; }  .italic {   font-style: italic; }  .oblique {   font-style: oblique; } 

Specifications

Specification
CSS Fonts Module Level 4 # font-style-prop

See also

font-style font-weight Fundamental text and font styling

Last modified: Aug 16, 2021, by MDN contributors

Select your preferred language English (US)DeutschEspañolFrançais日本語PolskiРусский中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
“If you just sit and observe, you will see how restless your mind is. If you try to calm it, it only makes it worse, but over time it does calm, and when it does, there’s room to hear more subtle things. You see so much more than you could see before. It’s a discipline; you have to practice it.”
Steve Jobs
Random CSS Property

blur()

The blur() CSS function applies a Gaussian blur to the input image. Its result is a <filter-function>.
blur() css reference