Summary
The font-style
CSS property lets you select italic
or oblique
faces within a font-family
. Italic forms 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. Both italic and oblique faces are simulated by artificially sloping the glyphs of the regular face (see font-synthesis
for control over this).
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
font-style: normal; font-style: italic; font-style: oblique; /* Global values */ font-style: inherit; font-style: initial; font-style: unset;
Values
normal
- Selects a font that is classified as
normal
within afont-family
. italic
- Selects a font that is labeled
italic
, or, if no italic version of the face is available, one labeledoblique
is selected instead. oblique
- Selects a font that is labeled
oblique
, or, if no oblique version of the face is available, one labeleditalic
is selected instead.
Formal syntax
normal | italic | oblique
Example
The example shows the different font-style
values. The CSS looks like this:
.normal { font-style: normal; } .italic { font-style: italic; } .oblique { font-style: oblique; }
Note that not all font have distinct faces for oblique
and italic
, if this is not the case, browsers are simulating the missing one by using the face that is present. An example of rendering of a font with both faces:
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 | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1.0 | 1.0 (1.7 or earlier) [1] | 4.0 | 7.0 | 1.0 |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 1.0 | 1.0 (1) [1] | 6.0 | 6.0 | 1.0 |
[1] Before Firefox 44, Gecko didn't make a different between oblique
and italic
. Since then, it uses the correct face, if available.