可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
I'm a webmaster at http://www.beperk.com (I'm giving you the URL so you are able to check the problem) and I'm having lots of problems using @font-face in CSS.
I want to use the foundicons from zurb dot com so I hosted them at Amazon S3.
I set up the bucket to allow crossdomain access as specified here: http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html#how-do-i-enable-cors
And everything started to work seamless at webkit, trident and gecko... mostly: when browsing the web with firefox (version 17, 18 and 19 tested) all the icons fails randomly with this error:
Timestamp: 22/02/13 13:18:01 Error: downloadable font: download failed (font-family: "GeneralFoundicons" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed
And I say randomly since after a full reload of the page (with control/command + R) every single icon appears normally to fail again after some visits.
Can anyone find the problem?
回答1:
On your server you will need to add:
Access-Control-Allow-Origin
To the header of the font files, so for example if you are using Apache you can add this to the .htaccess:
Header set Access-Control-Allow-Origin "*"
回答2:
If anyone are using local resource and facing this problem in firefox. You can go to about:config and change the security.fileuri.strict_origin_policy preference to false.
see : https://developer.mozilla.org/en-US/docs/Same-origin_policy_for_file:_URIs
回答3:
try to use implemented base64-encoded fonts like:
@font-face { font-family:"font-name"; src:url(data:font/opentype;base64,[paste-64-code-here]); font-style:normal; font-weight:400; }
see: http://sosweetcreative.com/2613/font-face-and-base64-data-uri
it worked perfectly.
回答4:
I resolved the problem in Firefox (local resource access problem) using uri: src: uri("../fuentes/EurostileLTStd.otf"); instead of src: uri("../fuentes/EurostileLTStd.otf");.
