font-style: italic 不生效的根本原因是字体文件本身未提供斜体变体，浏览器不会强制倾斜字形，而仅尝试调用已有的 italic 或 oblique 字重文件；中文字体尤其常见此问题，需选用自带斜体的字体或通过 @font-face 显式引入斜体文件。
font-style: italic 为什么有时不生效
常见现象是写了 font-style: italic，但文字还是直挺挺的——不是 CSS 没加载，而是字体本身不支持斜体变体。浏览器不会“强行倾斜”字形，它只是去调用当前字体的 italic 或 oblique 字重文件。如果字体（比如某些自定义 Web Font 或系统中缺失斜体版本的中文字体）压根没提供 italic 样式，那这行声明就等于白写。
实操建议：
- 优先选用自带完整斜体变体的字体，例如
"Helvetica Neue", Arial, sans-serif；中文字体推荐"PingFang SC", "Microsoft YaHei"（它们在主流系统里通常带斜体） - 用
@font-face引入自定义字体时，必须显式声明font-style: italic并指向对应的斜体文件，不能只靠一个font-weight变化来“模拟” - 临时调试可用
font-style: oblique，它会让浏览器做几何倾斜（类似transform: skewX(-12deg)），但质量差、可读性低，仅限原型或 fallback 场景
font-style: italic 和 font-style: oblique 的区别
关键不在写法，而在渲染机制：font-style: italic 是语义化的——告诉浏览器“我要用这个字体设计好的斜体字形”；font-style: oblique 是机械的——让浏览器对正体字做线性倾斜变形。
使用场景差异：
立即学习“前端免费学习笔记（深入）”；
- 英文排版必须优先用
italic，因为 Garamond、Georgia 这类衬线体的斜体是专门设计的连笔和字形变化，不是简单倾斜 -
oblique在中文字体中几乎无意义：汉字没有传统斜体概念，所有“斜体效果”都靠倾斜实现，但浏览器对中文做oblique倾斜后容易模糊、断笔，且无法继承原字体 hinting 信息 - CSS 动画或 transition 中慎用
oblique，部分浏览器不支持其动画插值，会直接跳变
在 CSS 预处理器里怎么安全地复用 italic 样式
很多人用 @mixin 或 @function 封装 font-style: italic，结果发现组件里文字突然全斜了——问题出在继承和 specificity 上。
实操建议：
- 避免全局混入（如
@include text-italic）直接写死font-style，改用带作用域的 class，比如.text--emphasized，再在其中定义font-style: italic - 如果必须用 mixin，加上参数控制是否强制覆盖：
@mixin font-style($value: italic) { font-style: $value; }，防止无意中覆盖父级设置 - 注意
font-style会被all: unset或all: revert重置，若用到这类重置规则，需单独再声明font-style
font-style 对伪元素 ::before/::after 的影响
给 ::before 加内容并设 font-style: italic，结果斜体没出来？大概率是因为伪元素默认继承父级样式，而父级可能用了 font-family 不含斜体的字体，或者被更高优先级规则压制。
排查要点：
- 伪元素的
font-family必须显式指定，不能依赖继承——尤其当父级是中文字体时，子伪元素可能 fallback 到无斜体的备用字体 - 确保伪元素的
content是纯文本（如content: "→"），如果用了图标字体（如 Font Awesome），要确认该字体文件是否包含italic变体，否则font-style无效 - 不要在伪元素上用
font-style: inherit，它会继承父级的normal，失去控制权
font-style: italic，从来不是“让字变斜”，而是在问浏览器——“你手上有这个字的斜体版本吗？” 
