按钮显示不正确（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. 使用上面链接的解决方案将适当的标头添加到服务器（如果您有控制权），以允许使用“跨域”字体（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问题。

Answer 2

应用此CSS并获取输出

   @font-face {
    font-family: 'VideoJS';
    src: url('https://vjs.zencdn.net/f/1/vjs.eot');
    src: url('https://vjs.zencdn.net/f/1/vjs.eot?#iefix') format('embedded-opentype'), 
      url('https://vjs.zencdn.net/f/1/vjs.woff') format('woff'),     
      url('https://vjs.zencdn.net/f/1/vjs.ttf') format('truetype');
  }

.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder:before, .vjs-icon-pause:before {
    content: "\f103";
    font-family: 'VideoJS';
}

.video-js .vjs-mute-control .vjs-icon-placeholder:before, .vjs-icon-volume-high:before {
    content: "\f107";
    font-family: 'VideoJS';
}

.video-js .vjs-big-play-button .vjs-icon-placeholder:before, .video-js .vjs-play-control .vjs-icon-placeholder:before, .vjs-icon-play:before {
    content: "\f101";
    font-family: 'VideoJS';
}

.video-js .vjs-picture-in-picture-control .vjs-icon-placeholder:before, .vjs-icon-picture-in-picture-enter:before {
    content: "\f121";
    font-family: 'VideoJS';
}



 .video-js .vjs-fullscreen-control .vjs-icon-placeholder:before, .vjs-icon-fullscreen-enter:before {
    content: "\f108";
    font-family: 'VideoJS';
}