优先用 <em> 表示强调，<i> 仅用于技术术语、外文短语等非强调斜体；CSS 中应设 font-style: italic 并指定含真实斜体的字体，避免 oblique 合成；二者均为行内元素，需显式设置 display 控制布局。
用 <i> 还是 <em>？语义决定写法
HTML 里让文字变斜体，最直接想到的是 <i>，但它只是视觉样式标签，不带语义；<em> 才是标准的“强调”语义标签，浏览器默认也渲染为斜体。搜索引擎和读屏软件会识别 <em> 的强调含义，而 <i> 只会被当作纯样式处理。
除非你明确需要表示技术术语、外文短语、船名等非强调类斜体（W3C 规范定义的 <i> 合理使用场景），否则优先用 <em>。
- 强调一句话中的重点词 → 用
<em> - 写一个拉丁学名 Canis lupus → 用
<i> - 显示一段外语短语 bonjour → 用
<i> - 仅为了“看起来斜一点” → 不推荐，应改用 CSS 控制
font-style: italic 在 CSS 中怎么写才不踩坑
用 CSS 控制斜体更灵活，但要注意：不是所有字体都自带斜体变体。如果当前字体没有 italic 字重，浏览器会强行做字体倾斜（synthetic oblique），导致字形模糊、笔画失真，尤其在小字号或 Retina 屏上明显。
正确做法是显式指定含真实斜体的字体栈，并确保 font-style 值为 italic 而非 oblique（后者容易触发合成）。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
font-style: italic;+ 使用如"Segoe UI", "Helvetica Neue", sans-serif这类广泛支持真实斜体的字体 - 避免写
font-style: oblique;，除非你刻意要倾斜效果 - 用
@font-face引入自定义字体时，务必单独声明font-style: italic对应的woff2文件，不能只靠 font-style 切换
行内元素套斜体后换行错乱？注意 <em> 默认是 inline
<em> 和 <i> 都是行内容器，不会自动换行或撑开块级空间。如果你发现加了斜体后文字“挤在一起”或“对不齐”，大概率是因为父容器用了 display: flex 或 white-space: nowrap，而你没意识到 <em> 不会破坏行内流。
- 想让它独占一行？给它加
display: block;或display: inline-block; - 想控制左右间距？别依赖空格，用
margin或padding - 嵌套多个
<em>时，连续空格会被合并 —— 这是 HTML 解析规则，和斜体无关
移动端 Safari 显示斜体发虚？检查字体加载和渲染策略
iOS Safari 对字体子集和合成斜体特别敏感。常见现象是：PC 上清晰的斜体，到 iPhone 上变成毛边、发虚，甚至回退成正体。
- 确认是否用了
font-synthesis: none;—— 它会禁用浏览器合成，但若字体本身没提供斜体，就直接失效 - 用
font-display: swap;时，初始渲染可能用系统默认字体（无斜体），等自定义字体加载完才切换，造成闪烁 - 稳妥方案：在
@font-face中为同一字体族分别注册normal和italic两个源，并确保font-style匹配准确
<i> 就万事大吉，却没验证它在 VoiceOver 下是否被跳过，也没检查 iOS 是否悄悄用了合成斜体。 
