CSS @font-face - font-style

The font-style CSS descriptor permits the authors to specify styles for the specified fonts in the @font-face at-rule.

font-style descriptor is used exclusively to specify the font face'e style. These font faces correspond to the different styles of the same font family.

The descriptor font-style takes the same values as that of its corresponding font-style property.

The font-style descriptor should not to be confused with the font-style property. The font-style descriptor is used solely with the @font-face at-rule to explicitly select italic or oblique font faces for that rule. The font-style property is then used elsewhere in the style sheet to apply that font style to an element.

Possible Values

The font-style CSS descriptor can have one of the following values:

  • normal: Specifies normal version of the font-family.

  • italic: Specifies an italicized version of the normal font.

  • oblique: Specifies a sloped version of the normal font.

  • oblique with angle: An oblique style with an angle to specify the slantness of the text.

Syntax

font-style = "normal | italic | oblique [ <angle>{1, 2} ]";

CSS font-style - Italic Value

Specifying italic font style

Following example demonstrates the use of font-style descriptor on @font-face at-rule for a downloaded font-family.

<html>
<head> 
<style>
  @font-face {
      font-family: "f1";
      src: url("font/Brygada1918-Italic.ttf");
      font-style: italic;
      }

   h1 {
      font-family: "f1", serif;
   }
</style>
</head>
<body>
   <h1>
      Testing font-style.
   </h1>
    
    <h2>
      Testing font-style.
    </h2>
</body>
</html>

In the example above:

  • A font file is downloaded by the name "Brygada1918-Italic.ttf", from the family Brygada1918.

  • A @font-face at-rule is declared by the font-family name f1 and font-style: italic.

  • Make sure the font face is supporting the italic form of it.

  • Based on the value of font-style the text in h1 element is displayed as italicized and the one in h2 element is not italicized.

Advertisements