font-style: italic 依赖字体是否提供真实斜体字形，中文字体多无italic变体，浏览器会算法倾斜导致失真；应优先选用自带斜体的英文字体，中文需用@font-face加载含italic的字体文件。
用 font-style: italic 让文字倾斜，但不是所有字体都生效
直接写 font-style: italic 是最常用的方式，但它依赖字体本身是否提供斜体字形。很多中文字体（如「微软雅黑」「思源黑体」）默认没有真正的 italic 变体，浏览器会强行做算法倾斜（oblique），效果生硬、字形失真，甚至影响可读性。
实操建议：
- 对英文/数字文本，优先选用自带
italic的字体，比如"Times New Roman", Georgia, "Source Serif Pro" - 对中文，别指望
font-style: italic能出“印刷级斜体”，它大概率只是机械倾斜——这不是 bug，是字体设计决定的 - 若需统一视觉风格，考虑用
transform: skewX(-12deg)手动控制倾斜角度，但注意这会破坏文字的点击热区和语义结构
很多人以为 就是“加斜体”，其实它的语义是「以不同语气或风格呈现的文本」，比如外文词、科技术语、船名；而 表示「强调」，有明确的语义权重，屏幕阅读器会重读它。
样式上两者默认都渲染为斜体，但关键区别在于：
立即学习“前端免费学习笔记（深入）”；
-
不应被用于单纯装饰性倾斜——那是 CSS 的事 -
嵌套时，部分浏览器会逐层加深斜度（实际是叠加font-style，但多数只认最外层） - 如果禁用 CSS，
仍保有强调含义，则退化为普通文本
用 @font-face 加载带真实斜体的字体文件
想让中文也显示“真正斜体”，必须引入含 italic 字重的字体文件（例如 Noto Sans SC 的 Italic 版本）。CSS 中需显式声明 font-style: italic 并指向对应 src。
@font-face {
font-family: "NotoSansSC";
src: url("NotoSansSC-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "NotoSansSC";
src: url("NotoSansSC-Italic.woff2") format("woff2");
font-weight: 400;
font-style: italic;
}
body {
font-family: "NotoSansSC", sans-serif;
}
注意：font-style: italic 必须和 @font-face 声明中的 font-style 完全匹配，否则浏览器不会切换字形。
移动端 Safari 对 font-style: italic 的兼容细节
iOS 15+ 之前，Safari 在某些系统字体（如 -apple-system）上会忽略 font-style: italic，尤其在 text-rendering: optimizeLegibility 开启时。这不是 bug，而是 Apple 为保证小字号可读性做的主动限制。
绕过方法有限，推荐：
- 避免在 iOS 小字号正文（
- 用
font-family显式指定支持斜体的第三方字体（如 Inter、IBM Plex Sans） - 测试时打开「设置 → 辅助功能 → 显示与文字大小 → 粗体文字」，确认斜体是否仍可见——开启粗体后，部分斜体可能被强制还原为正体
真正起作用的从来不是「怎么写斜体」，而是「这个斜体有没有对应的字形数据」。没加载 italic 字重，再标准的 CSS 也只是画饼。
