无需CSS样式，如何在WebVTT字幕中设置字体大小？

你提到的在WebVTT字幕时间轴后直接添加font-size属性的写法，WebVTT规范本身并不支持，不过有两种可靠的替代方法可以实现单cue级别的字体大小控制：

1. 使用内联CSS样式包裹字幕文本 #

在每个字幕内容外层添加<span>标签，并通过style属性指定字体大小，这是目前浏览器支持最广泛的方案：

00:00:00.000 --> 00:00:04.000
<span style="font-size:80%">This is sized at 80%</span>

• 注意：WebVTT仅允许使用<span>标签来包裹文本添加内联样式，其他HTML标签（如<p>、<div>）不被支持。
• 兼容性：Chrome、Firefox、Edge等现代浏览器均完美支持该写法，大部分主流视频播放器也能正确解析。

2. 优化TTML转WebVTT的转换逻辑 #

如果是从TTML批量转换，你可以在转换工具中添加逻辑：提取TTML中每个字幕片段的字体大小样式，自动生成带内联<span>的WebVTT字幕。比如TTML中的：

<p begin="00:00:00.000" end="00:00:04.000">
  <span style="font-size:80%">This is sized at 80%</span>
</p>

转换时直接映射为WebVTT的内联样式写法，无需手动修改每个cue。

另外需要明确：你之前尝试的size:80%是WebVTT的内置属性，它控制的是字幕块的宽度占视窗的比例（比如size:50%表示字幕块只占屏幕宽度的一半），和字体大小没有任何关系，所以无法达到你想要的效果。

内容的提问来源于stack exchange，提问作者Fishay