试一试
font-style: normal;
font-style: italic;
font-style: oblique;
font-style: oblique 40deg;
<section id="default-example">
<p id="example-element">
London. Michaelmas term lately over, and the Lord Chancellor sitting in
Lincoln's Inn Hall. Implacable November weather. As much mud in the streets
as if the waters had but newly retired from the face of the earth, and it
would not be wonderful to meet a Megalosaurus, forty feet long or so,
waddling like an elephantine lizard up Holborn Hill.
</p>
</section>
@font-face {
src: url("/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.ttf");
font-family: "Amstelvar";
font-style: normal;
}
section {
font-size: 1.2em;
font-family: "Amstelvar", serif;
}
斜体字体通常具有草书性质，通常比其未样式化的对应字体占用更少的水平空间，而倾斜字体通常只是常规字体的倾斜版本。当指定的样式不可用时，斜体和倾斜字体都会通过人工倾斜常规字体的字形来模拟（使用 font-synthesis 来控制此行为）。
语法
font-style: normal;
font-style: italic;
font-style: oblique;
font-style: oblique 10deg;
/* Global values */
font-style: inherit;
font-style: initial;
font-style: revert;
font-style: revert-layer;
font-style: unset;
font-style 属性指定为从以下值列表中选择的单个关键字，如果关键字是 oblique，则可以选择包含一个角度。
值
normal-
选择在
font-family中归类为normal的字体。 italic-
选择归类为
italic的字体。如果没有可用的斜体版本，则使用归类为oblique的版本。如果两者都不可用，则人工模拟样式。 oblique-
选择归类为
oblique的字体。如果没有可用的倾斜版本，则使用归类为italic的版本。如果两者都不可用，则人工模拟样式。 oblique<angle>-
选择归类为
oblique的字体，并额外指定文本倾斜的角度。如果所选字体家族中有一个或多个倾斜字体可用，则选择与指定角度最接近的字体。如果没有可用的倾斜字体，浏览器将通过将常规字体倾斜指定量来合成字体的倾斜版本。有效值为包含-90deg到90deg的度数值。如果未指定角度，则使用 14 度角。正值向行尾倾斜，而负值向行首倾斜。通常，对于请求的 14 度或更大角度，优先选择更大的角度；否则，优先选择更小的角度（有关精确算法，请参阅规范的字体匹配部分）。
可变字体
可变字体可以对倾斜字体倾斜的程度进行精细控制。您可以使用 oblique 关键字的 <angle> 修饰符来选择此选项。
对于 TrueType 或 OpenType 可变字体，"slnt" 变体用于实现倾斜字体的不同倾斜角度，而 "ital" 变体（值为 1）用于实现斜体值。请参阅 font-variation-settings。
点击下方代码块中的“播放”以在 MDN Playground 中编辑示例。更改角度值以查看文本倾斜的变化。
<p class="sample">
...it would not be wonderful to meet a Megalosaurus, forty feet long or so,
waddling like an elephantine lizard up Holborn Hill.
</p>
@font-face {
src: url("https://mdn.github.io/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.ttf");
font-family: "AmstelvarAlpha";
font-style: normal;
}
.sample {
font:
2rem "AmstelvarAlpha",
sans-serif;
/* font-variation-settings: "slnt" 12; */
font-style: oblique 23deg;
}
无障碍
对于患有阅读障碍等认知障碍的人来说，大段文字设置 font-style 值为 italic 可能会难以阅读。
正式定义
| 初始值 | normal |
|---|---|
| 应用于 | 所有元素和文本。它也适用于 ::first-letter 和 ::first-line。 |
| 继承性 | 是 |
| 计算值 | 同指定值 |
| 动画类型 | 按计算值类型；normal 动画为 oblique 0deg |
正式语法
font-style =
normal |
italic |
left |
right |
oblique <angle [-90deg,90deg]>?
示例
字体样式
.normal {
font-style: normal;
}
.italic {
font-style: italic;
}
.oblique {
font-style: oblique;
}
规范
| 规范 |
|---|
| CSS 字体模块第 4 级 # font-style-prop |
浏览器兼容性
加载中…