应优先用语义标签：强调内容用<em>，外文/学名等用<i>；CSS中优先font-style: italic而非oblique；斜体失效多因继承、重置或字体缺失。
斜体不是“怎么让它变斜”，而是“该用什么语义+什么技术手段去实现”——选错标签或 CSS 值，轻则样式失效，重则破坏可访问性、SEO 和维护性。
什么时候该用 <em> 而不是 <i>
读屏软件会把 <em> 当作强调内容，改变语调；<i> 则被当作“语气不同但不重要”的文本，比如拉丁学名、外文短语、船名。搜索引擎也据此加权关键词。
- 用户说“我
<em>真的</em>没改配置” → 用<em> - 文档中写
<i>Homo sapiens</i>或<i>bonjour</i>→ 用<i> - 想让按钮文字临时变斜表示“禁用中” → 不该用标签，该用 class +
font-style: italic - 全局重置了
em { font-style: normal }→<em>就不斜了，而<i>更“顽固”
font-style: italic 和 font-style: oblique 的实际差异
浏览器对 italic 会优先查找字体自带的斜体字形（如 Segoe UI Semibold Italic）；oblique 是纯算法倾斜，哪怕字体没斜体也会硬掰，结果常是模糊、失真、小字号下尤其明显。
- 优先写
font-style: italic，别写oblique，除非你明确要模拟倾斜效果 - 用自定义字体时，
@font-face必须单独声明font-style: italic对应的.woff2文件，不能只靠 CSS 切换 - 某些等宽字体（如 Fira Code、JetBrains Mono）默认不带斜体，
italic会退化成oblique，肉眼可见笔画发虚
斜体没生效？先查这三处覆盖点
90% 的“斜体不显示”不是代码写错，而是被更高优先级规则悄悄干掉了。
立即学习“前端免费学习笔记（深入）”；
- 父元素设了
font-style: normal，子元素没显式重写 → 继承导致失效 - CSS 中写了
i, em { font-style: normal !important }→ 直接清零 - 用了
<em>，但外部框架（如 Bootstrap）的 base.css 里有em { font-style: normal } - 字体本身无斜体变体，且没配
font-synthesis: none→ 浏览器自动合成，但 iOS Safari 渲染极差，发虚甚至回退成正体
<em> 和 <i> 都是 inline 元素，布局上容易踩坑
它们不会自动换行、不撑开高度、不响应 margin-top/bottom，嵌套时连续空格还会被 HTML 合并 —— 这些都不是斜体的问题，是行内元素的通病。
- 想让它独占一行？加
display: block或display: inline-block - 想控制左右间距？别依赖空格，用
margin或padding - 发现加了斜体后文字“挤在一起”？先检查父容器是否用了
white-space: nowrap或display: flex - 移动端 Safari 显示发虚？确认
font-display: swap是否导致初始用系统字体（无斜体），加载完才切换，造成闪烁
最常被忽略的点：语义和样式混用。靠 <i> 实现图标、靠 <em> 实现视觉强调，后续接手的人根本分不清哪段是“需要读出来的重要信息”，哪段只是“想看起来斜一点”。真要控样式，就老实用 CSS；要用语义，就选对标签。
