font-style
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-style为oblique时才支持范围;对于font-style: normal或italic,不允许使用第二个值。
正式定义
| 相关的 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");
}

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

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

规范
| 规范 |
|---|
| CSS 字体模块第 4 级 # font-prop-desc |
浏览器兼容性
加载中…