video::cue 是唯一生效的字幕样式选择器，必须配合 WebVTT 的 line/align 指令控制位置；中英文需按 lang 或 class 分别设置字体；text-shadow 提升可读性但需兼容老 Firefox；.vtt 文件首行为 WEBVTT 且服务器返回 text/vtt 类型。
::cue 本身不支持直接控制字幕位置，所有“居顶/居中/居底”必须靠 WebVTT 文件里的 line 和 align 指令实现，CSS 只能影响文字外观。
video::cue 必须带 video 前缀才能生效
只写 ::cue 或 track::cue 都不会生效——浏览器只认 video::cue 这一种写法。这是最常被忽略的硬性规则。
- ✅ 正确：
video::cue { color: white; background: rgba(0,0,0,0.7); } - ❌ 无效：
::cue、track::cue、video track::cue - 如果样式完全没反应，先检查这条；Vue/React 中若用 CSS Modules，需确保该样式未被局部作用域隔离
按语言或类名定制中英文不同字体
中文字幕需要无衬线黑体（如 "PingFang SC"），英文字幕适合 "Helvetica Neue"，直接用 WebVTT 的 v[lang="zh"] 或自定义类即可区分。
- WebVTT 中标注语言：
<v lang="zh">你好</v>→ 对应video::cue(v[lang="zh"]) - WebVTT 中加类：
<c.highlight>重点</c.highlight>→ 对应video::cue(.highlight) - 避免在
video::cue中设font-family全局值，否则中英文都会套用同一字体，中文可能 fallback 到难看的 serif
text-shadow 是提升可读性的关键，但 Firefox 旧版不支持
text-shadow: 1px 1px 2px black 比单纯加大背景透明度更可靠，尤其在亮色画面下。不过 Firefox 89 之前版本会忽略它。
立即学习“前端免费学习笔记（深入）”；
- 兼容方案：优先用
color: white+background-color: rgba(0,0,0,0.6)组合 - 不要用
text-shadow做唯一对比手段，否则在老 Firefox 里字幕可能直接看不见 - 禁用
display、transform、flex等布局属性——它们在::cue中全被浏览器静默忽略
.vtt 文件和服务器配置稍有差错，样式就彻底失效
样式不生效，八成不是 CSS 写错了，而是底层链路断了。
-
.vtt文件第一行必须是纯文本WEBVTT（不能有 BOM，不能有多余空格） - 服务器必须返回
Content-Type: text/vtt，Nginx 示例：add_header Content-Type text/vtt; -
<track>标签要带kind="subtitles"和srclang，否则部分浏览器不触发::cue渲染
真正麻烦的是多行字幕换行逻辑和 line-height 的配合——line-height: 1.4 看似合理，但在某些分辨率下会导致第二行被截断，得实测调整。别信“通用值”，每个项目都要调。
