font标签已废弃，应使用video::cue伪元素控制VTT字幕样式；::cue匹配所有字幕行，::cue(.dialog)匹配带class:dialog提示的字幕，::cue-region控制容器；字体单位推荐clamp()或rem，VTT中class需按规范书写且CSS选择器须严格对应。
font 标签早已被废弃，浏览器虽仍能解析，但任何现代项目都不该再用它控制字幕或文字样式。
video::cue 伪元素是唯一可靠入口
VTT 字幕内容本身不支持 CSS 类、ID 或选择器，样式必须通过 ::cue 这类伪元素在 HTML 页面中统一控制。它不是“给某个 <span></span> 加 class”，而是浏览器渲染字幕层时自动暴露的样式钩子。
-
::cue匹配所有字幕行，适合全局基础样式（如font-size、color、text-shadow） -
::cue(.dialog)只匹配 VTT 文件中带class:dialog提示的字幕行，可用于区分对话/旁白/歌词等语义类型 -
::cue-region控制整个字幕容器（比如多行叠加时的背景高度、内边距） - 这些伪元素只能写在页面的
<style></style>或外部 CSS 中，不能写进 VTT 文件
font-size 单位选 rem 还是 vw？看场景
字幕字体大小既要适配不同屏幕，又不能随滚动或缩放失真，单位选择很关键：
- 用
rem：配合html { font-size: 16px; }，适合需要和页面其他文字保持比例一致的场景；但小屏下可能偏小，需配合媒体查询 - 用
vmin或clamp()：例如font-size: clamp(14px, 2.2vmin, 20px);，能随视口线性缩放，更适合全屏视频字幕；注意clamp()在 Safari 13.4+ 才稳定，IE 完全不支持 - 避免单独用
vw：比如font-size: 4vw;，横向滚动或窗口缩放时字号突变，阅读节奏被打断
VTT 文件里 class 提示怎么写才生效
VTT 不是 HTML，不能写 class="dialog"，必须用 WebVTT 规范定义的 class: 提示语法，且必须紧跟在时间轴后、字幕正文前，用空格分隔：
立即学习“前端免费学习笔记（深入）”；
00:01:22.300 --> 00:01:25.100 class:dialog align:center 这是角色 A 的台词
对应 CSS 必须严格写成：video::cue(.dialog) —— 缺少 video 前缀、漏掉点号、大小写不一致都会失效。
- 多个 class 用空格分隔：
class:dialog narrator→ 可用::cue(.dialog.narrator)或分别匹配 - class 名必须是合法 CSS 标识符（不能含空格、中文、特殊符号）
- 如果用了
align:end等提示，它只影响布局，不影响::cue的样式匹配逻辑
真正容易被忽略的是：字幕样式受视频容器尺寸、父级 transform、甚至 will-change 属性影响；调试时建议先移除所有动画和缩放相关 CSS，确认 ::cue 生效后再逐步加回。
