CSS font-style 属性

CSS font-style 语法

在 CSS 中，font-style 属性用于定义字体的斜体效果。

语法：

font-style: 关键字;

说明：

font-style 的取值有以下 3 种。

normal（默认值）：定义正常的字体样式（非斜体）。
italic：定义字体为斜体。如果当前字体没有提供斜体字形，浏览器通常会模拟一个斜体效果。
oblique：定义字体为斜体。与 italic 类似，但 oblique 通常是字体本身设计为倾斜的字形，而不是由浏览器模拟的。可以使用一个可选的 < 角度 > 来指定倾斜的角度，例如 oblique 14deg。如果未指定角度，默认是 14 度。

对于 font-style 属性，小伙伴们要清楚以下几点。

大多数字体都提供 normal 和 italic 字形。oblique 字形不那么常见。
如果一个字体同时提供 italic 和 oblique 字形，italic 通常优先于 oblique。
如果指定了 oblique 并带有角度，但字体不支持该角度，浏览器会尝试模拟或使用默认角度。

CSS font-style 摘要

属于	CSS 字体倾斜
使用频率	高
是否继承	是
默认值	normal
兼容性	查看
官方文档	查看
MDN	查看

CSS font-style 示例

接下来，我们通过一个简单的例子来讲解一下 CSS font-style 属性是如何使用的。

示例：font-style 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        p:nth-child(1) { font-style: normal; }
        p:nth-child(2) { font-style: italic; }
        p:nth-child(3) { font-style: oblique; }
    </style>
</head>
<body>
    <p>字体样式为：normal（默认值）</p>
    <p>字体样式为：italic</p>
    <p>字体样式为：oblique</p>
</body>
</html>

页面效果如下图所示。

font-style示例

font-style: italic; 和 font-style: oblique; 的区别

很多初学的小伙伴都会有这样的一个疑问：“font-style 的取值中，italic 和 oblique 有什么区别？” 。首先抛出结论：italic 是使用字体的斜体，而 oblique 是让没有斜体的文字倾斜。

italic（真斜体）：这是字体设计师专门设计的一套字形。对于很多字体（尤其是衬线体，如 Georgia 或 Times New Roman），斜体不仅仅是把字 “歪” 过来，字体的结构也会发生变化，更具有手写书法的流线美感。
oblique（倾斜体）：通常只是将正常字体（Normal）进行机械式的几何倾斜，字形的骨架结构并没有改变。

很多旧教程可能会说：“如果字体没有设计斜体，使用 italic 就无效。” 实际上，这在现代浏览器中是不正确的。

对于现代浏览器来说，它的处理逻辑如下：

当设置 font-style: italic 时，浏览器会优先寻找该字体自带的 “真斜体” 文件。
如果该字体没有提供斜体版本，浏览器并不会 “无动于衷”，而是会自动通过算法强制将文字向右倾斜，模拟出斜体效果。

在实际开发中，绝大多数情况下我们都应该使用 italic。只有当非常明确地想要 “机械倾斜” 的效果，或者想要使用 CSS 新特性指定具体的倾斜角度（如 oblique 15deg）时，我们才考虑使用 oblique。