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

Question

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

该字体似乎不适用于子域。有解决这个问题的想法吗？

Answer 1

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

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

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

您可以

1. 使用上面链接的解决方案将适当的 header 添加到您的服务器(如果您有控制权)以允许“跨域”字体(www.example.com 被视为与 example.com 不同的域)
2. 从活跃的域动态加载 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 的问题。