CSS 字体倾斜 - 绿叶网

在 CSS 中，我们可以使用 font-style 属性来定义字体的倾斜效果。

语法：

font-style: 关键字 ;

说明：

font-style 的取值有 3 种，如下表所示。

font-style 属性取值
属性值	说明
normal（默认值）	正常
italic	斜体
oblique	斜体

示例：CSS 定义字体倾斜效果

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .p1 { font-style: normal; }
        .p2 { font-style: italic; }
        .p3 { font-style: oblique; }
    </style>
</head>
<body>
    <p class="p1">字体样式为：normal（默认值）</p>
    <p class="p2">字体样式为：italic</p>
    <p class="p3">字体样式为：oblique</p>
</body>
</html>

页面效果如下图所示。

CSS 字体斜体效果

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

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

对于一种字体来说，它有粗体、斜体、下划线、删除线等属性。但并非所有的字体都拥有这些属性。对于一些不常用的字体，可能就只有正常体（而没有斜体）。对于没有斜体属性的字体来说，你使用 italic 就不会有斜体效果了，此时就需要使用 Oblique。

在实际开发中，如果你使用了 font-style: italic; 发现文字没有斜体效果，此时就应该搭配 font-style: oblique; 来使其具有斜体效果。