em 用于语义强调，向辅助技术和搜索引擎传递重读意图；i 仅标注特殊类型文本，不表强调；斜体效果应通过 css 实现，避免以样式替代语义。
em 表示语气强调，不是“加斜体”的快捷键
浏览器默认把 em 渲染成斜体，但它的核心作用是向屏幕阅读器、搜索引擎和开发者传递“这个词被说话人刻意重读了”——比如反讽、对比、否定或关键约束。读屏软件（NVDA、VoiceOver）会抬高语调、延长停顿；Google 会将其内容纳入关键词权重计算，尤其在段首或标题附近。
常见错误现象：<i>必须</i>保存后退出 —— “必须”是强制语气，用 i 就等于告诉辅助技术：“平读，别加重”，用户可能直接跳过风险提示。
实操建议：
- 句子中需要语音重读的部分，如“你
不能删库”、“这真的不是 bug” - 术语首次出现且带解释意图，如“DOM 树由
节点构成” - 嵌套
em有意义：双层表示更强语气（如引述中的再强调），但不要为“看起来更斜”而嵌套——那是font-style: italic的事
i 标签只标记“类型不同”，不传递强调意图
i 的本职是标注那些“本身就不属于主叙述流”的文字：外文词、生物学名、船名、作品名、术语缩写等。它不触发语调变化，不参与 SEO 权重，也不暗示重要性。W3C 明确提醒：“不要仅仅为了斜体效果而用它”。
常见误用场景：
- 按钮文字写成
<i>提交</i>—— 操作指令必须可感知，应改用span+ CSS 或语义化按钮 - 错误提示
<i>请确认已备份</i>—— “已备份”是动作状态，需强调，该用em -
<i class="icon-home"></i>—— 图标字体属于历史遗留写法，现代应改用span+aria-hidden="true"或原生svg
斜体不可作为唯一信息载体，视觉与语义必须分离
仅靠斜体传达关键信息（如“必填项”“禁用中”“暂无数据”）违反 WCAG 1.4.1。屏幕阅读器无法识别斜体，色觉障碍用户也看不到差异。
实操建议：
- 表单必填字段：加
required属性 + 视觉标识（如星号），而非只靠em或i斜体 - 禁用状态提示：用
aria-disabled="true"+ CSS 控制样式，而不是斜体 + 文字说明 - 表格空值占位：写
<td aria-live="polite">暂无数据</td>，别只斜体显示“—” - 所有斜体文字都应有对应语义支撑——要么是
em（强调语气），要么是i（类型标注），要么是纯 CSS（font-style: italic）
字体与渲染细节影响实际效果
不是所有字体都有真实斜体变体。若指定的字体不支持 italic，浏览器会强行做合成倾斜（oblique），导致小字号下笔画模糊、Retina 屏上发虚。
实操建议：
- CSS 中优先写
font-style: italic，避免oblique - 显式声明含真实斜体的字体栈，例如：
font-family: "Inter", "Segoe UI", system-ui; - 如果项目要求统一斜体风格，用
em, i { font-style: italic; }重置，而不是删掉语义换标签 - 检查开发者工具：
em元素会显示role="emphasis"；i则无此 role —— 这是验证语义是否生效的最快方式
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
