应优先用 <em> 表达语气强调（如「确认删除」中的「删除」），用 <i> 标注外文术语或学名；纯视觉斜体首选 font-style: italic CSS，避免语义错误与渲染问题。
按钮里用 <em> 还是 <i>？语义错了就埋坑
按钮文字不是随便斜一下就行。如果想表达“这是重点操作”，比如「确认删除」里的「删除」需要语气强调，该用 <em>；如果按钮里塞的是外文术语（如「<i>Edit</i> Mode」）或船名、学名，才用 <i>。用错标签，读屏软件会读错语气，CSS 重置后还可能直接失效——比如有人全局写了 em { font-style: normal !important; }，<em> 就彻底不斜了，但 <i> 还在硬撑。
纯视觉斜体：优先写 font-style: italic，别碰 <em> 结构
多数时候你只是想让按钮文字看起来斜一点，没有语义需求。这时候老实用 CSS：button.italic-btn { font-style: italic; }。但注意三点：
- 字体本身得有真实斜体变体，否则浏览器会合成
oblique，小字号下模糊发虚 - 推荐字体栈里显式包含支持斜体的字体，比如
"Inter", "Segoe UI", sans-serif - 别写
font-style: oblique，它不保证字形质量，且某些字体下和italic渲染完全不同
用 transform: skewX() 做倾斜效果，但别滥用
真要搞设计感倾斜（比如向右偏 8°），transform: skewX(-8deg) 比改 font-style 更可控。但它不是斜体，是几何变形：
- 必须设
transform-origin: center，不然倾斜中心飘移 -
skewX()会影响文字宽度，按钮 padding 要重新调 - Safari 在移动端对
transform+ 小字体渲染敏感，边缘容易锯齿，加-webkit-font-smoothing: antialiased缓解 - 千万别在
button上直接套skewX后又用font-style: italic叠加——两者逻辑冲突，结果不可控
斜体没生效？先查这三处地方
按钮上写了 font-style: italic 却还是正体，大概率不是代码写错，而是被覆盖了：
立即学习“前端免费学习笔记（深入）”；
- 父容器设置了
font-style: normal，子元素没显式重写，继承导致失效 - CSS 选择器权重更高，比如
button { font-style: normal; }直接压过了你的类名规则 - 用了自定义字体但
@font-face没声明font-style: italic对应的文件，浏览器 fallback 到合成斜体，而某些字体（尤其等宽体）根本没斜体字形
字体是否真含斜体，打开浏览器开发者工具，选中按钮，在 computed 样式里看 font-family 实际加载的是哪个文件，再核对 @font-face 声明是否匹配。
