font-face - 按钮未正确显示(Videojs 字体不适用于子域)

Question

我在使用 video.js 时遇到问题。在主域上一切正常。但是在 www.子域按钮未正确显示(仅显示 )。

看起来字体在子域上不起作用。任何想法来解决这个问题？

Answer 1

VideoJS 使用自定义字体，使用 @font-face 定义video-js.css 中的指令。里面定义的路径是相对的。当 FireFox 加载字体时，它使用 CSS 文件的根 URL 并连接字体路径。

因此，在查看子域时，将从您的主域加载自定义字体。听起来不是问题，对吧？但是火狐 does not allow cross-domain fonts without access control headers 为了安全。

换句话说，FireFox 通常要求从显示的页面域加载每个自定义字体。如果您正在查看 www.example.com，则您的字体必须来自 www.example.com，而不是 example.com。

你可以

使用上面链接的解决方案将适当的标题添加到您的服务器(如果您有控制权)以允许“跨域”字体(www.example.com 被视为与 example.com 不同的域)

从任何处于事件状态的域动态加载 VideoJS CSS 文件。

如果要走后一条路线，当用户查看 www.example.com , 负载 http://*www.*example.com/path/to/video-js/video-js.min.css .查看时 example.com , 负载 http://example.com/path/to/video-js/video-js.min.css .

请注意，Webkit 不在乎——似乎只是 Firefox 的问题。