我正在尝试在安装在客户网站上的小部件中使用字体真棒图标。字体真棒图标在 Safari 和 Chrome 中正确显示，但在 Firefox 中没有。但是，在我们的网站上预览它时，它仍然在 Firefox 中正确显示。这是否与 Firefox 如何跨域显示第三方字体有关？
任何想法将不胜感激。谢谢。
注意：这是使用 Firefox V9 及更高版本测试的。
问问题
15188 次
8 回答
5
如果字体所在的服务器发送正确的 CORS 标头，Firefox 仅允许跨域链接字体。它这样做是因为规范非常清楚地说明要这样做，在http://dev.w3.org/csswg/css3-fonts/#default-same-origin-restriction
于 2012-05-18T06:42:38.763 回答
1
我注意到一个奇怪的行为，可能与 Firefox 安全策略有关。我在这样的项目配置中遇到了同样的问题：
- /site/html <--- 所有 .html 文件所在的位置
- /site/resources/... <--- 所有的css、font、 img 、 js 东西都在哪里
现在，我将 font-awesome.min.css 包含在位于 /site/html 目录下的 html 文件中，并尝试了您的问题。但是当你下载 Font Awesome 包时，它附带了在 firefox 中实际工作的 html 演示文件。有什么诀窍？！
他们的项目结构有嵌套在“html”文件夹内的“resources”文件夹（他们称之为“assets”）。这似乎平息了firefox的安全策略。最后，我的回答是：得到如下配置
- /site/html <--- 所有 .html 文件所在的位置
- /site/html/resources/... <--- 所有的css、font、 img 、 js 东西都在哪里
它对我有用。
于 2013-01-09T17:24:28.440 回答
1
如果您在 S3 上托管字体，则必须在存储桶上启用 CORS。有关详细信息，请参阅我对其他问题的回答
于 2013-08-08T15:30:42.060 回答
1
MaxCDN 发现并修复了这个问题。他们设置了正确的 CORS 标头并将此行嵌入到您的网站应该可以工作：
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
于 2014-09-18T22:16:03.637 回答
0
Firefox blocks Cross-Origin Request.
Firefox disallows reading the remote resource due to Same Origin Policy for below CDN:
https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css
I dug little to fix CORS issue instead I replaced above CDN with below one and icons rendering fine:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css">
于 2014-07-25T10:42:53.377 回答
0
使用直接链接来包含 css 文件，还要确保在调试控制台中不会出现跨域错误。
例如，当您从以下位置访问您的网站时：
http://www.domain.tld确保从同一路径链接 css 文件，包括www
像这样：http://www.domain.tld/css/style.css
并且当您从http://> 链接 css 文件也从同一路径访问时www.
http://domain.tld/css/style.css
我前段时间遇到了这个问题，并通过修改 css 路径以从“相同”网址/路径请求 css 文件来修复它。
示例： 您可以在此路径中查看字体真棒图标
但不是在这个：
因为字体是从http://domain.tld路径中链接的，而没有添加 www。在里面
link href=
来自“ http://webake.ro ”的字体已被跨域资源共享策略阻止加载：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问源“ http://www.webake.ro ”。
于 2015-01-26T14:13:43.910 回答
0
将您的字体转换为 base64 并通过 CSS 包含。通过这种方式，您可以通过浏览器代码推送字体，并且字体文件不会以通常需要跨域权限的方式下载。这也是禁用可下载字体的 DISA STIG 问题，但可能不是您的问题。 该解决方案可以在这篇文章中看到，也可以在这里复制：
您只需要Base64字体并将其包含在 CSS 文件中。包含对新 FontAwesomeB64.css 的调用后，请确保删除对可下载 WOFF 文件的调用
使用https://www.base64encode.org/对 WOFF Font-Awesome 字体文件进行编码。
编辑生成的文件并添加这些行。当您到达 src:url 行时，请确保将其直接运行到您收到的 base64 信息中（不要使用我在此处显示的大于和小于符号。）在该 base64 信息的末尾添加单引号、括号、分号和花括号结束：
@font-face {
font-weight: 400;
font-style: normal;
font-family: 'FontAwesome';
src:url(data:application/x-font-woff;base64,<insert base64 code here>);}
您现在有一个 Font-Awesome 字体的 base64 CSS 文件，它绕过了浏览器中的所有字体下载拒绝设置。
我发现这适用于所有字体，下载时有点重，但值得保证功能。
于 2017-06-14T22:15:53.440 回答
-2
@font-face{font-family:'FontAwesome-webfont';
相信我，这确实有效。
于 2013-06-04T01:45:48.467 回答