在css中设置字体倾斜主要通过font-style属性实现，该属性是控制文本字体样式的基础属性，除了倾斜效果外还可以设置正常、倾斜变体等状态，其中倾斜相关的取值是最常用的功能。
font-style属性核心取值
font-style属性有三个常用取值，其中两个用于实现字体倾斜效果，具体如下：
- normal：默认值，文本以正常字体显示，无倾斜效果
- italic：使用字体的斜体版本显示文本，需要字体本身包含斜体字形
- oblique：将正常字体进行倾斜变形显示，不需要字体本身有斜体字形
基础设置示例
以下是使用font-style设置字体倾斜的基础代码示例：
/* 设置类为italic-text的元素使用斜体倾斜 */
.italic-text {
font-style: italic;
}
/* 设置类为oblique-text的元素使用变形倾斜 */
.oblique-text {
font-style: oblique;
}
/* 设置类为normal-text的元素恢复正常字体 */
.normal-text {
font-style: normal;
}
对应的html结构如下：
<p class="italic-text">这段文字使用italic方式倾斜</p> <p class="oblique-text">这段文字使用oblique方式倾斜</p> <p class="normal-text">这段文字是正常字体</p>
italic和oblique的区别
很多开发者会混淆italic和oblique两个取值，两者的核心差异如下：
| 取值 | 实现原理 | 依赖条件 | 效果特点 |
|---|---|---|---|
| italic | 调用字体自带的斜体字形 | 字体文件包含斜体变体 | 倾斜角度更符合字体设计，字形可能有细微调整 |
| oblique | 将正常字形进行几何倾斜 | 无特殊依赖，所有字体都支持 | 倾斜角度固定，字形和正常字体一致仅角度变化 |
如果使用的字体没有斜体变体，设置italic会自动降级为oblique效果，因此实际开发中如果对倾斜效果没有特殊要求，两者可以通用。
结合其他字体属性使用
字体倾斜可以和font-weight、font-size等属性组合使用，实现更丰富的文本样式：
/* 倾斜加粗的标题样式 */
.title {
font-style: italic;
font-weight: bold;
font-size: 20px;
}
/* 倾斜的小号说明文字 */
.desc {
font-style: oblique;
font-size: 12px;
color: #666;
}
注意事项
- 部分中文字体没有专门的斜体字形，设置
italic时效果和oblique几乎一致 - 不要使用
transform: skew()来实现字体倾斜，该属性是倾斜整个元素，会导致元素内的图片、边框等一起变形，不符合文本样式调整的需求 - 如果需要兼容非常老旧的浏览器，建议优先使用
oblique，部分旧版本浏览器对italic的支持不完善
注意：font-style属性会被继承，父元素设置了倾斜样式，子元素默认也会继承该样式，如果需要子元素恢复正常，需要单独设置font-style: normal。
cssfont_styleitalicoblique字体倾斜修改时间：2026-07-22 21:39:24