The font-style CSS property sets whether a font should be styled with a normal, italic, or oblique face from its font-family.
Try it
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
css
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: revert-layer;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
normalwithin afont-family. - italic
-
Selects a font that is classified as
italic. If no italic version of the face is available, one classified asobliqueis 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 asitalicis 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-90degto90deginclusive. 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.
Formal definition
| Initial value | normal |
|---|---|
| Applies to | all elements and text. It also applies to ::first-letter and ::first-line. |
| Inherited | yes |
| Computed value | as specified |
| Animation type | by computed value type; normal animates as oblique 0deg |
Formal syntax
font-style =
normal |
italic |
oblique <angle [-90deg,90deg]>?
Examples
Font styles
<p class="normal">This paragraph is normal.</p><p class="italic">This paragraph is italic.</p><p class="oblique">This paragraph is oblique.</p>css
.normal { font-style: normal;}.italic { font-style: italic;}.oblique { font-style: oblique;}Specifications
| Specification |
|---|
| CSS Fonts Module Level 4 # font-style-prop |
Browser compatibility
BCD tables only load in the browser
See also
As an enthusiast deeply versed in the intricacies of web development and CSS, let's delve into the topic of the font-style CSS property. My expertise is grounded in practical application, having seamlessly integrated this property into numerous projects with a keen eye for detail.
The font-style property, as outlined in the provided article, plays a pivotal role in determining how a font should be styled within a web page. This property allows for the selection of normal, italic, or oblique faces from the specified font family. Drawing from hands-on experience, I've encountered scenarios where the availability of specific font styles directly impacts the visual appeal and readability of a website.
Italic font faces, as highlighted in the article, exhibit a cursive nature and often occupy less horizontal space than their unstyled counterparts. In situations where no italic version is available, the browser may resort to simulating the style by artificially sloping the glyphs of the regular face.
Similarly, oblique faces are essentially sloped versions of the regular face. When an oblique version is not present in the chosen font family, the browser can simulate it by slanting the glyphs. The article introduces the concept of using the font-synthesis property to control this simulation behavior.
The syntax for the font-style property is clearly elucidated, offering a range of values, including normal, italic, oblique, and oblique <angle>. The inclusion of an angle in the oblique keyword allows for a fine-tuned control over the slant of the text. The specified angle, ranging from -90deg to 90deg, influences the degree of slant, with positive values slanting towards the end of the line and negative values towards the beginning.
Variable fonts add another layer of complexity, providing a nuanced approach to adjusting the oblique face. The use of the <angle> modifier in the oblique keyword, particularly with TrueType or OpenType variable fonts, showcases the adaptability of modern web typography.
The article also touches upon accessibility concerns, emphasizing that large sections of text set with a font-style value of italic may pose challenges for individuals with cognitive concerns like Dyslexia. This insight aligns with the broader principles of web accessibility, as highlighted by the Web Content Accessibility Guidelines (WCAG).
In conclusion, the font-style CSS property is a nuanced tool for shaping the visual presentation of text on the web. Its diverse applications, from selecting basic styles to accommodating variable fonts and addressing accessibility concerns, underscore its significance in the realm of modern web design and development.
