i和em谁才是斜体_HTML语调强调正确选型

应优先用em，因其传达语义强调，使屏幕阅读器重读、SEO识别重点；i仅用于外文词、术语等无强调意图的惯例斜体场景。

该用 em 还是 i？先看语义意图

不是“哪个能变斜体”，而是“你想告诉机器什么”。em 告诉浏览器和读屏软件：“这个词需要被重读”；i 只说：“它按惯例该斜着写”。搜索引擎、无障碍工具、语音合成器全靠这个区别做判断。

常见误用场景：

• 写 <i>JavaScript</i> 介绍语言——错，没传达强调意图，应改用 <em>JavaScript</em>
• 写 <em>draft</em> 表示文档状态——错，draft 是惯例性标签，不需语气强调，该用 <i>draft</i>
• CSS 把 em 设为 font-style: normal 后发现文字不斜了——正常，em 的语义不绑定样式；而 i 更“顽固”，即使 CSS 重置也常保持斜体（因它本就是样式导向）

em 的嵌套会改变语调强度吗？

会，但不是“更斜”或“更粗”。主流读屏软件（如 NVDA、VoiceOver）对嵌套的 em 有层级响应：单层 <em>快</em> 可能略加重音，双层 <em>快<em>走</em></em> 会增加停顿或提升语调变化幅度。

但注意：

立即学习“前端免费学习笔记（深入）”；

• 嵌套不等于样式叠加，CSS 里 em em 不会自动加粗或放大
• 连续嵌套超过两层易让语音合成混乱，实际项目中极少需要三层以上
• 别用嵌套来“强行突出”，重点应靠内容结构和 strong 配合表达

哪些情况必须用 i？

W3C 明确定义了 i 的合理使用边界，不是“随便斜一下”都能用它：

• 技术术语首次出现：<i>DOM</i> 树由节点构成
• 外文短语：<i>et al.</i>、<i>caveat emptor</i>
• 作品名、船名：<i>The Odyssey</i>、<i>Titanic</i>
• 状态标签：<i>deprecated</i>、<i>experimental</i>
• 纯装饰性斜体，且确认无任何强调、无读音变化需求

如果拿不准，优先用 em；如果明确属于上述五类之一，就用 i。

CSS 控制斜体比标签更稳妥？

是，但前提是字体支持真实 italic 变体。很多 Web 字体（尤其中文）只提供 normal 和 oblique（合成倾斜），小字号下字形模糊、笔画失真。

安全写法示例：

code, kbd, i, em {  font-family: "Inter", "SF Pro Text", system-ui;  font-style: italic;}

关键点：

• 显式指定含真实斜体的字体栈，避免依赖浏览器合成
• font-style: italic 优先于 oblique，后者易触发合成
• 若仅需视觉斜体且无语义，直接用 class + CSS，彻底避开 i 和 em 的语义纠结

真正容易被忽略的是：语义错误在开发阶段几乎零成本，但上线后被无障碍审计标红、SEO 权重下降、读屏用户理解偏差——这些修复成本远高于写对一个标签。