font-style

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来,各浏览器均已提供此特性。

font-style CSS 描述符允许作者为 @font-face 规则中指定的字体指定字体样式。

对于某个特定的字体家族,作者可以下载对应同一字体家族不同样式的各种字体字形,然后使用 font-style 描述符来明确指定字体字形的样式。此 CSS 描述符的值与对应的 font-style 属性的值相同。

语法

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

normal

选择字体家族的正常版本。

italic

指定字体字形是正常字体的斜体版本。

oblique

指定字体字形是正常字体的人工倾斜版本。

带角度的 oblique

选择归类为 oblique 的字体,并额外指定文本倾斜的角度。

带角度范围的 oblique

选择归类为 oblique 的字体,并额外指定文本倾斜的允许角度范围。请注意,只有当 font-styleoblique 时才支持范围;对于 font-style: normalitalic,不允许使用第二个值。

正式定义

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

正式语法

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

示例

指定斜体字体样式

例如,考虑 garamond 字体家族,在正常形式下,我们得到以下结果

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

unstyled Garamond

此文本的斜体版本使用与未样式版本中相同的字形,但它们被人为倾斜了几度。

artificially sloped garamond

另一方面,如果存在字体家族的真正斜体版本,我们可以将其包含在 src 描述符中并将字体样式指定为 italic,以便明确该字体是斜体。真正的斜体使用不同的字形,并且与它们的直立对应物略有不同,具有一些独特的特征,通常具有圆润和书法般的品质。这些字体由字体设计师专门创建,并且不是人为倾斜的。

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

italic garamond

规范

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

浏览器兼容性

另见