font-style

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

For a particular font family, authors can download various font faces that correspond to the different styles of the same font family and then use the font-style descriptor to explicitly specify the font face's style. The values for this CSS descriptor are the same as that of the corresponding font-style property.

语法

css
font-style: normal;
font-style: italic;
font-style: oblique;
font-style: oblique 30deg;
font-style: oblique 30deg 50deg;

值

normal

选择字体的普通版本。

italic

指定 font-face 是普通字体的斜体版本。

oblique

指定 font-face 是普通字体的斜体版本。

oblique with angle

选择分类为 oblique 的字体，并另外指定文本倾斜角度。

oblique with angle range

选择分类为 oblique 的字体，并另外指定文本倾斜角度的允许范围。请注意，仅当 font-style 为 oblique 时才支持范围；对于 font-style: normal 或 italic，不允许使用第二个值。

正式定义

相关 at-rule@font-face
初始值normal
计算值如指定

正式语法

font-style = 
  auto                                      |
  normal                                    |
  italic                                    |
  oblique [ <angle [-90deg,90deg]>{1,2} ]?

示例

指定斜体字型

例如，考虑 Garamond 字体系列，在其普通形式中，我们得到以下结果

css
@font-face {
  font-family: garamond;
  src: url("garamond.ttf");
}

unstyled Garamond

此文本的斜体版本使用与无样式版本中相同的字形，但它们的人工倾斜度为几度。

artificially sloped garamond

另一方面，如果字体系列存在真正的斜体版本，我们可以在 src 描述符中包含它并指定字体样式为斜体，以便清楚地表明字体是斜体。真正的斜体使用不同的字形，并且与它们的直立对应物略有不同，具有一些独特的特征，并且通常具有圆形和书法风格。这些字体是由字体设计师专门创建的，不是人工倾斜的。

css
@font-face {
  font-family: garamond;
  src: url("garamond-italic.ttf");
  font-style: italic;
}

italic garamond

规范

规范
CSS 字体模块级别 4
# font-prop-desc

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。

另请参阅