font-style

The font-style property allows the selection of either an italic or an oblique font style.

Most font families come packed with different font faces. The different CSS font properties allow us to select font faces from a list of available faces in a font family.

Italic forms are generally cursive in nature while oblique faces are typically sloped versions of the regular face.

Depending on the value of the font-style property, the browser will look for the corresponding face in a given font family and use it.

If the font family does not have an italic or oblique face, the browser will simulate or synthesize an oblique face by artificially sloping the glyphs of the regular (non-oblique) face. If you do not want the browser to synthesize an oblique or italic face, you can disable that using the font-synthesis property. Synthesized approaches may not be suitable for scripts like Cyrillic, where italic forms are very different in shape. It is always better to use an actual italic font rather than rely on a synthetic version. The following image shows the difference between an italic and an oblique face of a given font. Compare the artificially sloped renderings of Palatino ‘a’ and Baskerville ‘N’ in gray with the actual italic versions:

If the font family does not have an italic face, the browser uses the oblique face, if it exists. Similarly, if the oblique face does not exist, it uses the italic face, if the latter exists. If none of these faces exist, the browser would synthesize an oblique font face, unless specified otherwise in the font-synthesis property.

Trivia & Notes

The details of the obliquing operation that the browsers use to fake an oblique font face are not explicitly defined in the specification. When an italic or oblique face is synthesized by the browser, only little, if any, difference between the two faces is noticeable; most of the times they look almost exactly the same.