问题
Have a look here with Firefox (I've got 22.0):
http://www.jamhouse.com.au/
You'll see that the video-js custom font isn't working. Works fine in Chrome.
Any ideas would be greatly appreciated!
Watto :)
回答1:
Firefox has an extremely tight Cross-Domain policy. This includes sub-domains of your site (even www).
In your css you reference the fonts with http://jamhouse.com.au/templates/gk_fest/js/html5/font/vjs.XYZ (notice no www.) while on the link you posted it is http://www.jamhouse.com.au If you goto just http://jamhouse.com.au your fonts work.
You have a few options:
Recommended for true cross domain
Either set up an Access-Control-Allow-Origin in your .htaccess or httpd.con
For Apache: http://davidwalsh.name/cdn-fonts
For IIS: http://deserialized.com/iis/serving-web-fonts-cross-domain-with-iis/
-- OR --
Recommended for your case
you can reference the fonts relatively with url(font/vjs.XYZ)... as this will use whichever domain/sub-domain you are on (www or non-www)
-- OR --
You can enforce either http://www.jamhouse.com.au or http://jamhouse.com.au and reference the fonts with whichever way you choose.
For Apache: http://www.thesitewizard.com/apache/redirect-domain-www-subdomain.shtml
For IIS: http://forums.iis.net/t/1154053.aspx/1
-- OR --
You can embed the fonts directly in the css (which I've opted for my video.js installations)
Embedding fonts in css - http://blog.patdavid.net/2012/08/embedding-fonts-with-css-and-base64.html
Under expert mode you can choose base64 Encoded. http://www.fontsquirrel.com/tools/webfont-generator (I had limited success with their encoding, the play triangle (\e001) was not showing up.)
Encoding files in base64 http://www.motobit.com/util/base64-decoder-encoder.asp (make sure the output is all on one line with
回答2:
I've spent the last 2 hours resolving your issue haha. Ok I've managed to get it working. The problem is in your http://jamhouse.com.au/templates/gk_fest/js/html5/video-js.css
You link to the fonts via the full path url, but there must be some sort of security thing in place where only Chrome allows it. If you use the relative url to the fonts they will appear. I've just tried this now by saving your page locally and altering the font links in the css and now it works. Give that a try.
来源：https://stackoverflow.com/questions/18148393/video-js-custom-font-not-working-in-firefox