video字幕CSS美化生效的前提是浏览器加载并启用字幕轨道；需确保track标签在video内、VTT首行为WEBVTT、响应头为text/vtt、kind为subtitles/captions，且仅支持color、font-size等扁平化样式。
video 字幕能用 CSS 美化，但必须满足前提条件——浏览器真正加载并启用了字幕轨道；否则写再多 video::cue 样式也毫无反应。
确保字幕轨道被正确识别
样式不生效，90% 是轨道压根没就绪。检查以下硬性要求：
-
标签必须写在内部，不能靠 JS 动态插入后再加样式 - VTT 文件首行必须是纯文本
WEBVTT（无空格、无 BOM、无注释） - Network 面板确认 VTT 请求返回 200，且响应头
Content-Type为text/vtt -
kind属性只能是"subtitles"或"captions"；设成"descriptions"或"chapters"时::cue完全无效 - iOS Safari 会静默禁用
srclang与系统语言不匹配的轨道——即使写了样式，也不会渲染
只支持有限的扁平化样式属性
video::cue 不是普通 DOM 元素，而是浏览器合成层里的“影子文本”，无法嵌套选择或控制布局：
- ✅ 可用：
color、font-size、font-family、font-weight、text-shadow、background-color、opacity、text-align、line-height - ❌ 无效：
display、margin、padding、border、position、transform、width、height - ⚠️ 注意：所有样式作用于整条 cue（即时间轴上的一段字幕），不能单独选中某一行或某个词
基础美化写法示例
以下是一段实用、兼容性好的字幕样式写法：
video::cue {
color: #fff;
font-size: 1.2rem;
font-family: "Helvetica Neue", sans-serif;
text-shadow: 0 2px 4px rgba(0,0,0,0.6);
background-color: rgba(0,0,0,0.5);
text-align: center;
line-height: 1.5;
}
若需多语言差异化处理，可结合 srclang 使用属性选择器：
video[lang="zh"]::cue { font-family: "Microsoft YaHei", sans-serif; }
video[lang="en"]::cue { font-family: "Arial", sans-serif; }
调试建议
别一上来就调样式，先确认轨道是否真的激活：
- 在控制台运行
document.querySelector('video').textTracks，查看列表中是否有mode: "showing"的轨道 - 检查每个 track 的
readyState是否为2（loaded） - 临时加一条
video::cue { outline: 2px solid red; }，看有没有红框出现——没有就说明轨道未触发
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
