HTML track元素字幕样式美化教程-html教程-PHP中文网

video::cue样式不生效，先检查track是否真就绪；90%问题源于track未加载成功，需确认track在video内且位于source之后、VTT首行为纯WEBVTT、响应头为text/vtt、kind为subtitles/captions。

html track元素字幕样式美化教程

90% 的“字幕没变样”问题，根本不是 CSS 写错，而是 track 压根没加载成功——浏览器只对 readyState === 2 的字幕轨道应用 ::cue 规则。

必须确认以下几点：

必须写在标签内部，且严格位于所有之后、之前；写在外部或顺序颠倒，会被静默忽略
VTT 文件首行必须是顶格、全大写、无空格、无 BOM 的 WEBVTT，后面跟一个空行
Network 面板里看 .vtt 请求：状态码 200、响应头 Content-Type: text/vtt、无 CORS 报错
kind 只能是 "subtitles" 或 "captions"；设成 "descriptions" 或 "chapters" 时 ::cue 完全不触发
iOS Safari 会静默禁用 srclang 与系统语言不匹配的轨道——哪怕你写了样式，它也没渲染机会

::cue 不是普通 DOM 元素，它是浏览器合成层里的“影子文本”，只接受扁平化、跨浏览器兼容的样式。所有规则作用于整条 cue 块，无法选中单个词或某一行。

真正可用（Chrome / Firefox / Safari 主流版本均支持）的属性包括：

color、background-color（注意：background: linear-gradient() 在 Safari 中被忽略）
font-size（推荐用 em 或 rem，固定 px 在小屏易溢出）
font-family（中文字体建议 fallback 到 "PingFang SC", "Microsoft YaHei", sans-serif）
text-shadow（如 1px 1px 2px black，比纯背景更兼容；旧版 Firefox 不支持，需降级为 color + background-color）
padding（避免设过大值，多行字幕会被截断）
text-align、line-height、white-space（但换行行为实际由 VTT 文件中的 \n 和 line 指令控制，CSS 干预能力很弱）

明确无效（写了也白写）的属性：

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

即使结构和属性都对，仍可能因环境差异导致样式“看起来没生效”：

Chrome 和 Safari 对 text-shadow 支持不一致：Safari 16+ 才完全支持，旧版建议用 background-color + color 组合模拟遮罩效果
Firefox 对 font-size: 1.2rem 的解析偏小，可加 line-height: 1.4 补偿视觉密度
多行字幕在移动端被截断：不是 padding 太大，而是 VTT 中未用 line: 指令指定垂直位置，::cue 无法控制布局，只能靠调整 VTT 时间块拆分逻辑
中文标点或 emoji 显示异常：确保 VTT 文件保存为 UTF-8 无 BOM；若仍乱码，可在上加 dir="ltr" 强制文本方向

用 JS 动态设置 track.mode = "showing" 后，新激活的轨道不会自动继承已声明的 ::cue 样式——这不是 bug，是规范行为：样式只绑定到就绪（readyState === 2）且已插入 DOM 的轨道。

关键操作只有两个：

确保所有在页面加载时就存在并正确配置（不能靠 JS append），否则后续调用 mode = "showing" 时浏览器不触发样式重计算
如果必须动态注入，得等 fetch 获取 VTT 文本后，手动创建 TextTrack 对象并调用 addCue()，再设 mode；此时 ::cue 依然生效，但前提是该 TextTrack 已挂载到 video.textTracks 列表中

最稳妥的做法：HTML 中一次性声明全部语言的，仅用 JS 控制 mode，不碰 src 或 DOM 结构。