font-style
The font-style CSS property sets the text style, with normal, italic, and oblique options.
Overview
The font-style CSS property sets the text style, with normal, italic, and oblique options.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
| CSS at-rule | ||||||
| The font-style CSS descriptor allows authors to specify font styles for the fonts specified in the @font-face at-rule. | 4 | 12 | 3.5 | 3.1 | 18 | 2 |
| CSS property | ||||||
italic | 1 | 12 | 1 | 1 | 18 | 1 |
normal | 1 | 12 | 1 | 1 | 18 | 1 |
oblique | 1 | 12 | 1 | 1 | 18 | 1 |
oblique-angle `oblique` can accept an `<angle>` | 62 | 79 | 61 | 11.1 | 62 | 11.3 |
| Other | ||||||
| The font-style attribute specifies whether the text is to be rendered using a normal, italic, or oblique face. | 1 | 12 | 1 | 1 | 18 | 1 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
- Before Firefox 44, `oblique` was not distinguished from `italic`.
Notes 2 item(s)
Limitation
- This browser only partially implements this feature
Implementation note
- Angles from 14 to 90 have the same effect as `font-style: oblique` (with a slant of 14 degrees). Angles from -90 to 13 have the same effect as `font-style: normal` (without a slant). In some cases (e.g. with vertical `writing-mode`), a negative angle produces a slant. See bug 425388876.
Notes 2 item(s)
Limitation
- This browser only partially implements this feature
Implementation note
- Angles from 14 to 90 have the same effect as `font-style: oblique` (with a slant of 14 degrees). Angles from -90 to 13 have the same effect as `font-style: normal` (without a slant). In some cases (e.g. with vertical `writing-mode`), a negative angle produces a slant. See bug 425388876.
Notes 2 item(s)
Limitation
- This browser only partially implements this feature
Implementation note
- Angles from 14 to 90 have the same effect as `font-style: oblique` (with a slant of 14 degrees). Angles from -90 to 13 have the same effect as `font-style: normal` (without a slant). In some cases (e.g. with vertical `writing-mode`), a negative angle produces a slant. See bug 425388876.
Notes 2 item(s)
Limitation
- This browser only partially implements this feature
Implementation note
- Angles from 14 to 90 have the same effect as `font-style: oblique` (with a slant of 14 degrees). Angles from -90 to 13 have the same effect as `font-style: normal` (without a slant). In some cases (e.g. with vertical `writing-mode`), a negative angle produces a slant. See bug 425388876.
Notes 2 item(s)
Limitation
- This browser only partially implements this feature
Implementation note
- Angles from 14 to 90 have the same effect as `font-style: oblique` (with a slant of 14 degrees). Angles from -90 to 13 have the same effect as `font-style: normal` (without a slant). In some cases (e.g. with vertical `writing-mode`), a negative angle produces a slant. See bug 425388876.
Notes 1 item(s)
Implementation note
- Before Firefox 44, `oblique` was not distinguished from `italic`.
Syntax
CSS
em { font-style: italic; }
.oblique { font-style: oblique 14deg; }
.reset { font-style: normal; }Live demo
Use cases
Using font-style
The font-style CSS property sets the text style, with normal, italic, and oblique options.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features