The font-style
CSS property specifies whether a font should be styled with a normal, italic, or oblique face from its font-family
.
font-style: normal; font-style: italic; font-style: oblique; /* Global values */ font-style: inherit; font-style: initial; font-style: unset;
<div class="row"> <ul class="cell"> <li><em> normal:</em> <span class="fsNormal" >The quick brown fox jumps over the lazy dog</span></li> <li><em> oblique:</em> <span class="fsOblique">The quick brown fox jumps over the lazy dog</span></li> <li><em> italic:</em> <span class="fsItalic" >The quick brown fox jumps over the lazy dog</span></li> </ul> <div class="cell note"> The style above can vary, depending on the font you are using: <input id="fontName" value="Gill Sans"> </div> </div>
html,body { height: 100%; box-sizing: border-box; } .row { width: 100%; height: 100%; display: flex; background: #EEE; flex-direction: column; } .cell { flex: 1; white-space: nowrap; margin: .5em .5em 0; padding: .5em; background-color: #FFF; font: 1em monospace; overflow: auto; } .note { background: #fff3d4; padding: 1em; margin: 0 .5em .5em; font: .8em sans-serif; text-align: center; white-space: initial; flex: none; } ul { list-style: none; } ul.cell { padding: 1em 2em; font: 1rem/170% "Gill Sans", monospace; } li em { font-family: monospace; white-space: pre; font-style: normal; } .fsNormal { font-style: normal; } .fsOblique { font-style: oblique; } .fsItalic { font-style: italic; }
function updateFontFamily() { var fontName = document.getElementById('fontName').value; var fontFamily = '"' + fontName + '", monospace'; var UL = document.querySelector('ul.cell'); UL.style.fontFamily = fontFamily; } window.addEventListener('load', function () { var INPUT = document.getElementById('fontName'); INPUT.addEventListener('change', updateFontFamily); INPUT.addEventListener('input', updateFontFamily); });
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).
Initial value | normal |
---|---|
Applies to | all elements. It also applies to ::first-letter and ::first-line . |
Inherited | yes |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
The font-style
property is specified as a single keyword chosen from the list of values below.
Values
normal
- Selects a font that is classified as
normal
within afont-family
. italic
- Selects a font that is classified as
italic
. If no italic version of the face is available, one classified asoblique
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 asitalic
is used instead. If neither is available, the style is artificially simulated.
Formal syntax
normal | italic | oblique
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>
.normal { font-style: normal; } .italic { font-style: italic; } .oblique { font-style: oblique; }
Specifications
Specification | Status | Comment |
---|---|---|
CSS Fonts Module Level 3 The definition of 'font-style' in that specification. |
Candidate Recommendation | No change |
CSS Level 2 (Revision 1) The definition of 'font-style' in that specification. |
Recommendation | No change |
CSS Level 1 The definition of 'font-style' in that specification. |
Recommendation | Initial definition |
Browser compatibility
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 1 | 12 | 11 | 4 | 7 | 1 |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | 1 | 1 | 12 | 41 | 6 | 6 | 1 |
1. Before Firefox 44, oblique
was not distinguished from italic
.