video-js自定义字体在Firefox中不起作用

时间:2013-08-09 13:56:41

标签: firefox video.js custom-font

在这里看看Firefox(我有22.0):

http://www.jamhouse.com.au/

您会看到video-js自定义字体无效。适用于Chrome。

任何想法都将不胜感激!

Watto:)

2 个答案:

答案 0 :(得分:2)

Firefox有一个非常严格的跨域策略。这包括您网站的子域名(甚至是www)。

在您的CSS中,您使用http://jamhouse.com.au/templates/gk_fest/js/html5/font/vjs.XYZ引用字体(请注意没有www。),而在您发布的链接上http://www.jamhouse.com.au如果只转到http://jamhouse.com.au您的字体有效。

您有几个选择:

推荐用于真正的跨域

在.htaccess或httpd.con中设置Access-Control-Allow-Origin

对于Apache:http://davidwalsh.name/cdn-fonts

对于IIS:http://deserialized.com/iis/serving-web-fonts-cross-domain-with-iis/

- 或 -

建议您使用

您可以使用url(font / vjs.XYZ)相对引用字体...因为这将使用您所在的域/子域(www或非www)

- 或 -

您可以强制执行http://www.jamhouse.com.auhttp://jamhouse.com.au并使用您选择的任何方式引用字体。

对于Apache:http://www.thesitewizard.com/apache/redirect-domain-www-subdomain.shtml

对于IIS:http://forums.iis.net/t/1154053.aspx/1

- 或 -

你可以直接在css中嵌入字体(我选择了我的video.js安装)

在css中嵌入字体 - http://blog.patdavid.net/2012/08/embedding-fonts-with-css-and-base64.html

在专家模式下,您可以选择base64编码。 http://www.fontsquirrel.com/tools/webfont-generator(我的编码成功率有限,播放三角形(\ e001)没有出现。)

在base64 http://www.motobit.com/util/base64-decoder-encoder.asp中编码文件(确保输出全部在

的一行上)

答案 1 :(得分:0)

我花了最后2个小时来解决你的问题哈哈。好的,我已经设法让它工作。问题出在您的http://jamhouse.com.au/templates/gk_fest/js/html5/video-js.css

您可以通过完整路径网址链接到字体,但必须有某种安全措施,只有Chrome允许它。如果您使用它们将出现的字体的相对URL。我现在只是通过在本地保存页面并更改css中的字体链接来尝试此操作,现在它可以正常工作。试一试。