css - .vtt 文件中的字体样式？

Question

我正在制作一个关于编程的视频，并且我想包含具有 .vtt 扩展名的字幕。我认为如果字幕中的编码和技术文本使用 Consolas 字体显示会更好。就像在这个例子中一样：

打开终端并写入sudo apt-get update

在上面的例子中，技术部分是 Consolas 字体。那么这可能在 .vtt 文件中吗？

Answer 1

请注意，从 6.x 版本开始，Video-js 中已弃用了 '::cue' css 样式，如下面的答案中所述

【详情见：】https://github.com/videojs/video.js/issues/4852

根据我使用 Video-js 进行 VTT 样式化的经验，某些浏览器中也存在问题，即使/当您留下并使用 Video-js 的 5.x 版（这是我一直在做的）。一个这样的例子是，在 Firefox 浏览器中，无论您指定什么字体颜色都是白色的。（Chrome 将尊重您指定的任何字体颜色。）

Answer 2

WebVTT 支持样式块：

STYLE
::cue {
  font-family: Consolas, sans-serif;
}

如果用户计算机上没有安装 Consolas，您应该可以使用网络字体。

来源： https ://css-tricks.com/improving-video-accessibility-with-webvtt/