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.
To Continue Learning Please Login
Login with Google