font-style

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

选择 font-family 的常规版本。

italic

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

oblique

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

带有角度值 oblique

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

带有角度范围的 oblique

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

形式定义

Related at-rule@font-face
初始值normal
计算值as specified

形式语法

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

示例

指定斜体字体样式

以 garamond 字体家族为例,在其正常形式下,我们可以得到以下结果:

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

未加额外样式的 Garamond

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

人工倾斜的 Garamond

另一方面,如果存在字体家族的真正斜体版本,我们可以将其包含在 src 描述符中,并将字体样式指定为斜体,这样就可以清楚地看到字体是斜体了。真正的斜体使用不同的字形,与正体有些不同,具有一些独特的特征,通常具有圆润的书法气质。这些字体是由字体设计师专门设计的,并不是人为倾斜的。

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

斜体 Garamond

规范

Specification
CSS Fonts Module Level 4
# font-prop-desc

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
font-style

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见