应优先用em而非i表达语气强调，因em被读屏软件识别为语义强调并改变语音特征，而i仅标记外文词、术语等特殊文本类型且无语气作用；纯视觉斜体需求须用css实现。
用 <em></em> 还是 <i></i>？语义决定写法
不是“哪个能斜”，而是“斜的目的是什么”。<em></em> 表示语义强调（比如“你必须保存”，其中“必须”要重读），屏幕阅读器会改变语调；<i></i> 表示非强调类斜体，仅用于技术术语、外文短语、船名、生物拉丁学名等——它不传递重要性，只表示“类型不同”。
常见错误现象：<em></em> 在某些 CSS 重置库中被设为 font-style: normal，结果斜体消失；而 <i></i> 因语义弱，反而更“扛覆盖”，适合纯视觉需求。
- 想强调一句话里的关键词 → 用
<em></em> - 写
<i>git commit</i>或<i>Homo sapiens</i>→ 用<i></i> - 只是临时让按钮文字变斜（如“禁用中”）→ 别用标签，用
class="disabled-italic"+ CSS
<em></em> 斜体不生效？先查这三处
90% 的“斜体没出来”不是标签写错，而是被其他规则压制。优先检查：
- 父元素是否设置了
font-style: normal，且未在<em></em>上显式覆盖 - CSS 中是否存在类似
em { font-style: normal !important; }的全局重置 - 当前字体是否支持真实 italic 变体：若用的是
font-family: "Courier New"这类等宽字体，浏览器只能做 oblique 倾斜模拟，小字号下模糊失真
验证方式：临时加一行内样式 <em style="font-style: italic;">test</em>，如果这时斜了，说明是外部 CSS 干扰。
嵌套和布局问题：斜体文字挤在一起或换行异常
<em></em> 和 <i></i> 都是行内元素，不会自动换行、不撑开块级空间。所谓“错乱”，往往是父容器用了 white-space: nowrap 或 display: flex，而你没意识到它们默认不破坏行内流。
- 想让它独占一行 → 加
display: block或display: inline-block - 想控制左右间距 → 用
margin或padding，别依赖空格（HTML 会合并连续空白） - 连续多个
<em></em>套嵌（如<em>真的<em>非常</em>重要</em>）语义合法，但读屏软件可能过度加重，慎用三层以上
要不要用 CSS 替代？看场景
纯视觉需求（比如设计稿要求某段文字斜，但无强调或术语含义），直接上 CSS 更干净：span.highlight { font-style: italic; }。好处是不污染语义结构，也避免后续维护者误以为这是强调内容。
但注意：font-style: oblique 是浏览器合成倾斜，效果差；务必写 font-style: italic，并确保字体栈里有真实 italic 字重（例如 "Inter", "Segoe UI", sans-serif）。
真正容易被忽略的是：一旦你用 CSS 控制斜体，就彻底放弃了语义传达能力——对无障碍访问、SEO、文档修订场景都是隐形损失。所以别图省事，先问一句：这个斜，到底想告诉机器什么？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
