Question

我正在尝试在客户网站上安装的小部件中使用字体真棒图标。字体真棒图标在Safari和Chrome中正确显示，但在Firefox中不显示。但是，在我们的网站上预览时，它仍然可以在Firefox中正确显示。这是否与Firefox如何跨域显示第三方字体有关？

任何想法都将不胜感激。感谢。

注意：这是使用Firefox V9及更高版本测试的。

Answer 1

如果字体所在的服务器发送正确的CORS标头，则Firefox仅允许字体的跨域链接。这样做是因为规范非常明确地说是在http://dev.w3.org/csswg/css3-fonts/#default-same-origin-restriction

Answer 2

如果您在S3上托管字体，则必须在存储桶上启用CORS。有关详细信息，请参阅my answer其他问题

Answer 3

识别出MaxCDN并fix this issue。他们设置了正确的CORS标头，并将此行嵌入您的网站应该有效：

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

Answer 4

我注意到一个奇怪的行为，可能与firefox安全策略有关。我遇到了类似项目配置的相同问题：

/ site / html ＆lt; ---所有.html文件都在哪里
/ site / resources /...＆lt; ---所有 css ，字体，img，js的内容< / LI>

现在，我将font-awesome.min.css包含在位于/ site / html目录下的html文件中，然后我试验了你的问题。但是当你下载Font Awesome软件包时，它附带的html演示文件实际上可以在firefox中运行。有什么诀窍？！

他们的项目结构有“resources”文件夹（他们称之为“资产”）嵌套在“html”文件夹中。这似乎平息了Firefox的安全策略。最后，我的答案是：获得如下的配置

/ site / html ＆lt; ---所有.html文件都在哪里
/ site / html / resources /...＆lt; ---所有 css ，字体，img，js的东西去

它对我有用。

Answer 5

Firefox会阻止跨源请求。

由于以下CDN的同源策略，Firefox不允许读取远程资源：

https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css

我很少修复CORS问题，而是用下面的CDN取代上面的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">

Answer 6

使用直接链接来包含css文件，同时确保在调试控制台中没有出现跨域错误。

例如，当您从以下网址访问您的网站时：

http://www.domain.tld请确保从包含www

的相同路径链接css文件像这样：http://www.domain.tld/css/style.css

当您从http://＆gt;进行访问时链接css文件也来自那条没有www.

的完全相同的路径

http://domain.tld/css/style.css

我前一段时间遇到了这个问题，并通过修改css路径来修复从“相同”网址/路径请求css文件。

示例：你可以在这条路径中查看字体真棒图标

http://webake.ro/

但不是在这一个：

http://www.webake.ro/

因为字体是在http://domain.tld路径内链接而不添加www。在

link href=

来自“http://webake.ro”的字体已被跨源资源共享策略阻止加载：请求的资源上没有“Access-Control-Allow-Origin”标头。因此，不允许原点“http://www.webake.ro”访问。

Answer 7

将字体转换为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文件，可以绕过浏览器中的所有字体下载拒绝设置。

我发现这适用于所有字体，下载稍微重一点但值得保证功能。

Answer 8

@font-face{font-family:'FontAwesome-webfont';

相信我，这确实有用。

字体很棒在Firefox上无法正常显示

8 个答案:

例如，当您从以下网址访问您的网站时：