HTML字幕（）无法通过内联style设置字体大小，必须使用video::cue伪元素控制样式；推荐用clamp()实现响应式字号，禁用transform/zoom避免模糊，确保viewport正确。
HTML 字幕（<track></track>）本身不控制字体大小，真正决定字幕显示尺寸的是视频播放器的样式、浏览器默认渲染逻辑，以及你是否覆盖了 ::cue 伪元素。 直接在 <track></track> 标签里加 style 或改 font-size 属性完全无效——这是最常踩的坑。
为什么 <track></track> 加 style 没用？
因为浏览器把字幕内容作为独立层（类似 overlay）渲染，不走普通 DOM 流。它只响应 CSS 中专门针对字幕的伪类选择器 ::cue 和 ::cue-region。你写 <track kind="subtitles" src="xx.vtt" style="font-size:24px"></track>，这行 style 会被忽略。
-
<track></track>是空标签，没有子节点，不能直接套样式 - 浏览器对字幕的默认字号通常为
1.25rem左右（约 20px），但受根元素font-size和用户系统缩放影响 - 若页面未设
html { font-size }，或用了transform: scale()等全局缩放，::cue渲染会失真、发虚
必须用 ::cue 重写字幕样式
所有现代浏览器（Chrome 84+、Firefox 79+、Safari 13.4+）都支持 ::cue，它是唯一可控入口。注意：不要写成 :cue（单冒号），必须是双冒号。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 基础写法：
video::cue { font-size: 1.5rem; line-height: 1.4; } - 若需响应式字号，推荐用
clamp()：video::cue { font-size: clamp(1.25rem, 4vw, 2rem); } - 避免用
px，否则无法跟随系统缩放；也别用em（它会继承父级，而字幕层父级不可控） - 如果字幕区域太窄导致换行错乱，加
video::cue-region { width: 80%; }控制宽度
投屏/大屏下字幕模糊？先关掉 transform 和 zoom
很多团队在投屏前给整个 <video></video> 加 transform: scale(1.3)，结果字幕立刻糊成一片——因为 ::cue 内容也被当位图拉伸了。这不是分辨率问题，是渲染模式错误。
立即学习“前端免费学习笔记（深入）”；
- 删除所有对
<video></video>或其父容器的transform、zoom、scale()声明 - 确保
里有正确的 viewport：<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 动态适配大屏：监听
window.innerWidth，用 JS 设置document.documentElement.style.fontSize = (window.innerWidth / 1920) * 16 + 'px';，再让::cue用rem响应 - 别信
image-rendering: pixelated——它对字幕无效
真正难的不是写对 ::cue，而是意识到字幕样式和普通文本样式不在同一个渲染通道里。一旦你开始查 getComputedStyle(video, '::cue') 返回 null，就该明白：它不是 DOM 节点，不能用常规方式调试。务必从伪元素入手，且所有单位必须可缩放、禁用强制位图缩放。
