html5视频字幕样式可通过video::cue伪元素用css原生控制，支持基础样式统一设置、按语言/类名精细定制、webvtt指令配合排版微调，需注意文件编码、mime类型及浏览器兼容性限制。
HTML5 视频字幕样式可以通过 CSS 的 ::cue 伪元素直接控制，无需 JavaScript，浏览器原生支持，写法简洁、生效即时。
基础样式统一设置
对所有字幕文本应用通用外观，比如颜色、背景、字体大小和阴影：
- 必须将样式作用于
video::cue，不能只写::cue - 推荐使用半透明黑色背景（如
rgba(0,0,0,0.6)）提升文字可读性 -
text-shadow很实用，例如1px 1px 2px black可让白字在任意画面下都清晰 - 避免设固定
height或padding过大，防止多行字幕被截断
按语言或语义精细控制
WebVTT 文件中可嵌入语言标记或自定义类名，CSS 能据此差异化渲染：
- 用
video::cue(v[lang="zh"])单独设置中文字幕行高、字体（如"PingFang SC", "Microsoft YaHei"） - 在 .vtt 文件里用
<v class="speaker-a"></v>包裹说话人内容，再通过video::cue(.speaker-a)设不同颜色 - 支持
<b></b>、<i></i>等标签，可用video::cue(b)加粗关键词
位置与排版微调
WebVTT 本身支持 line、position、align 指令，配合 CSS 可实现更稳的布局：
- .vtt 文件中每段字幕开头可加注释行，例如：
NOTE line:80% align:end - 实际生效需在字幕块内写：
00:01:02.000 --> 00:01:05.000 line:80% align:end - CSS 中不能直接改位置，但可通过
video::cue设置font-size和line-height控制垂直空间 - 若需强制居上/居下，应优先在 .vtt 时间块中用
line:10%或line:90%定义
兼容性与常见避坑点
部分细节不注意会导致样式完全不生效：
- 确保 .vtt 文件以
WEBVTT开头，且保存为 UTF-8 无 BOM 编码 - Chrome 和 Safari 对
::cue支持完整；Firefox 早期版本不支持text-shadow，建议降级为color+background-color - 不要在
::cue中使用display、transform或 Flex 布局属性——这些被忽略 - 服务器需正确返回
Content-Type: text/vtt，否则字幕加载失败，样式自然无效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
