应优先用标签：字幕中斜体用于外文短语、术语等无强调含义的文本，如bon appétit；需语气强调时才用；误用会损害可访问性。
用 <i></i> 标签还是 <em></em>？先看语义需求
字幕（caption）本身是辅助性内容，但加斜体不是为了“看起来像字幕”，而是传达特定信息类型。如果字幕里出现的是外文短语、术语、船名、生物分类等——比如 <i>bon appétit</i> 或 <i>TCP/IP</i>，该用 <i></i>；如果是在强调语气，比如“**请务必注意**”中的“务必”，就该用 <em></em>。
误用 <em></em> 包裹无强调含义的术语，会导致读屏软件加重停顿，干扰理解；反过来，用 <i></i> 包裹真正需要强调的词，又会让语义丢失。字幕场景中，<i></i> 出现频率远高于 <em></em>。
font-style: italic 失效？优先排查这三处
写了 font-style: italic 却没变斜，大概率不是 CSS 写错：
- 全局 CSS 里有
i, em { font-style: normal !important; }—— 直接覆盖所有斜体 - 父容器（比如字幕容器
<div class="caption">）设了 <code>font-style: normal，而子元素没显式重写，继承导致失效 - 字体本身不支持 true italic（如多数中文字体「微软雅黑」「思源黑体」），浏览器 fallback 到
oblique，效果生硬甚至失真 - 边框、背景、点击热区全部跟着倾斜，用户点不到视觉上的文字区域
- 小字号下字体渲染发虚，尤其在高 DPI 屏幕或旧安卓 WebView 中
- 屏幕阅读器定位错乱，无障碍测试失败
-
<i></i>可以安全包裹<code>，但反过来不行（<code><i>xxx</i>是错的） - 避免在
<i></i>里塞块级元素（如<p></p>、<div>），HTML 解析会出错 <li>如果整段字幕都要斜体，优先用 CSS 类控制（如 <code>.caption--italic { font-style: italic; }），而不是每个词都套<i></i>
按钮/字幕内嵌斜体文字，别直接对 <button></button> 或 <span></span> 用 transform: skewX()
直接给按钮加 transform: skewX(-12deg) 看似简单，但会带来实际问题：
立即学习“前端免费学习笔记（深入）”；
正确做法是两层结构：<span class="tilted-wrapper"><span class="tilted-text">禁用中</span></span>，外层 skew，内层反向 skew 补偿，并加 overflow: hidden 和 position: relative 微调对齐。
字幕中混排代码、命令、外语时，嵌套要干净
字幕常需夹带技术名词或交互提示，比如 “运行 <i>git status</i> 查看变更”。这时要注意：
真正容易被忽略的是：斜体是否在打印样式（@media print）中被重置，以及是否在低配设备上因字体缺失退化为机械倾斜（oblique）。这些细节不报错，但影响交付质量。
