此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
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 2015年7月.
font-style CSS 描述符允许作者为@font-face @ 规则中指定的字体指定字体样式。
对于特定字体家族,作者可以下载与同一字体家族的不同风格相对应的各种字体,然后使用font-style 描述符明确指定字体的风格。该 CSS 描述符的值与相应的font-style 属性的值相同。
In this article
语法
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-style为oblique时,才支持范围;对于font-style: normal或italic,不允许使用第二个值。
形式定义
| Relatedat-rule | @font-face |
|---|---|
| 初始值 | normal |
| 计算值 | as specified |
形式语法
font-style =
auto|
normal|
italic|
left|
right|
oblique[<angle [-90deg,90deg]>{1,2}]?
示例
>指定斜体字体样式
以 garamond 字体家族为例,在其正常形式下,我们可以得到以下结果:
@font-face { font-family: garamond; src: url("garamond.ttf");}
该文本的斜体版本使用与无样式版本相同的字形,但它们被人为地倾斜了几度。

另一方面,如果存在字体家族的真正斜体版本,我们可以将其包含在src 描述符中,并将字体样式指定为斜体,这样就可以清楚地看到字体是斜体了。真正的斜体使用不同的字形,与正体有些不同,具有一些独特的特征,通常具有圆润的书法气质。这些字体是由字体设计师专门设计的,并不是人为倾斜的。
@font-face { font-family: garamond; src: url("garamond-italic.ttf"); font-style: italic;}
规范
| Specification |
|---|
| CSS Fonts Module Level 4> # font-prop-desc> |