【发布时间】：2012-05-25 04:37:15
【问题描述】：
我正在尝试在安装在客户网站上的小部件中使用字体真棒图标。字体真棒图标在 Safari 和 Chrome 中正确显示，但在 Firefox 中没有。但是，在我们的网站上预览它时，它仍然在 Firefox 中正确显示。这是否与 Firefox 如何跨域显示第三方字体有关？
任何想法将不胜感激。谢谢。
注意：这是使用 Firefox V9 及更高版本进行测试的。
【问题讨论】：
标签： firefox font-awesome
【发布时间】：2012-05-25 04:37:15
【问题描述】：
如果字体所在的服务器发送正确的 CORS 标头，Firefox 仅允许跨域链接字体。它这样做是因为规范非常清楚地表明要这样做，http://dev.w3.org/csswg/css3-fonts/#default-same-origin-restriction
【讨论】：
-
可能是愚蠢的问题，但我如何为那些字体文件发送正确的标题（指定 access-control-allow-origin *）？另外我使用的是rails应用程序而不是apache服务器。谢谢。
-
我不知道如何在您的特定服务器设置中发送正确的标头，抱歉...
-
我遇到了同样的问题，我似乎正确设置了 Access-Control-Allow-Origin 标头，但它仍然无法正常工作，这让我觉得我做错了。有人可以举例说明这应该如何工作吗？
-
我想我已经发现提供字体文件的域是需要设置标题的域。
-
<?php header('Access-Control-Allow-Origin: *'); ?>可用于在php文件中设置标题
我注意到一个奇怪的行为，可能与 Firefox 安全策略有关。 我在这样的项目配置中遇到了同样的问题：
- /site/html
- /site/resources/... css、font、img、js 的东西都去哪里了
现在，我将 font-awesome.min.css 包含在位于 /site/html 目录下的 html 文件中，并尝试了您的问题。 但是当你下载 Font Awesome 包时，它附带了在 firefox 中实际工作的 html 演示文件。有什么诀窍？！
他们的项目结构有嵌套在“html”文件夹内的“resources”文件夹（他们称之为“assets”）。这似乎平息了firefox的安全策略。 最后，我的答案是：获取如下配置
- /site/html
- /site/html/resources/... css、font、img、js 的东西都去哪里了
它对我有用。
【讨论】：
@font-face{font-family:'FontAwesome-webfont';
相信我，这确实有效。
【讨论】：
如果您在 S3 上托管字体，则必须在存储桶上启用 CORS。有关详细信息，请参阅 my answer 到其他问题
【讨论】：
Firefox 阻止跨域请求。
由于以下 CDN 的同源策略，Firefox 不允许读取远程资源：
https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css
我很少挖掘来解决 CORS 问题，而是将 CDN 上面的内容替换为下面的一个，并且图标渲染良好：
<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">
【讨论】：
MaxCDN 已识别和fix this issue。他们设置了正确的 CORS 标头并将此行嵌入到您的网站应该可以工作：
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
【讨论】：
使用直接链接包含 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”标头。 Origin 'http://www.webake.ro' 因此不允许访问。
【讨论】：
将您的字体转换为 base64 并通过 CSS 包含在内。通过这种方式，您可以通过浏览器代码推送字体，并且字体文件不会以通常需要跨域权限的方式下载。 This is also a DISA STIG issue 禁用可下载字体，但可能不是您的问题。 The solution can be seen at this post 也复制到这里：
您只需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 文件，它绕过浏览器中的所有字体下载拒绝设置。
我发现这适用于所有字体，下载时稍微重一些，但值得保证功能。
【讨论】：