字体 - 真棒不能正确显示在Firefox /如何通过CDN鬻？(Font-awesome not

我不能让字体真棒在Firefox中正常显示，即使是在本地主机。 我收到以下跨域错误：

Timestamp: 08/08/2012 02:49:37 PM
Error: downloadable font: download failed (font-family: "FontAwesome" style:normal weight:normal stretch:normal     `src index:2): bad URI or cross-site access not allowed
source: http://localhost:3000/djpsite/baseadmin/font/fontawesome-webfont.ttf
Source File: http://localhost:3000/djpsite/baseadmin/css/font-awesome.css
Line: 0
Source Code:
@font-face {   font-family: "FontAwesome";   font-style: normal;   font-weight: normal;   src: url("../font/fontawesome-webfont.eot?#iefix") format("embedded-opentype"), url("../font/fontawesome-webfont.woff") format("woff"), url("../font/fontawesome-webfont.ttf") format("truetype"), url("../font/fontawesome-webfont.svg#FontAwesome") format("svg"); }

我用双引号的这个职位的建议： 火狐@字体面失败，fontawesome ，但没有解决问题。

一切都在Chrome浏览器的罚款; 有什么建议？

除了在Chrome中解决了这个问题，我应该怎么鬻字体真棒在CDN给出这个限制： http://dev.w3.org/csswg/css3-fonts/#default-same-origin-restriction ？

下面是我的CSS文件中的代码：

@font-face {
    font-family: 'FontAwesome';
    src: url("../font/fontawesome-webfont.eot");
    src: url("../font/fontawesome-webfont.eot?#iefix") format('embedded-opentype'),
    url("../font/fontawesome-webfont.woff") format('woff'),
    url("../font/fontawesome-webfont.ttf") format('truetype'),
    url("../font/fontawesome-webfont.svg#FontAwesome") format('svg');
    font-weight: normal;
    font-style: normal;
}

谢谢你的帮助！

Answer 1:

这解决了火狐跨域字体问题对我来说（这将导致字体无法在Firefox加载）。 只需添加以下到.htaccess或直接到Apache的配置：

<FilesMatch "\.(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

有关于如何设置不同的服务器CORS指令的网页： https://enable-cors.org/server.html

Answer 2:

我通常发现添加本地声明修复了这个，按这个 。 例如：

@font-face {
  font-family: "Your typeface";
  src: url("type/filename.eot");
  src: local("☺"),
    url("type/filename.woff") format("woff"),
    url("type/filename.otf") format("opentype"),
    url("type/filename.svg#filename") format("svg");
}

我敢肯定，Apache的配置方法是比较正确的，但是你可能没有使用Apache或可不必做出这样的覆盖能力。

Answer 3:

如果你正在构建一个Rails应用程序（或其他一些基于机架的应用程序）来看看https://github.com/cyu/rack-cors超级容易启动和运行。 你可以把它扔进application.rb或环境文件之一。

Answer 4:

如果您正在使用AWS的Cloudfront在我的情况下，你需要添加一个CORS策略 。 S3特意不会让你在上传过程中设置的标头，因为你需要使用的策略来代替。

这种策略配置应该为你做的伎俩：

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
 </CORSRule>
</CORSConfiguration>

这从Firefox和Internet Explorer（IE）一个CDS获得字体 - 真棒工作。

Answer 5:

我在上Magento的2.0同样的问题。 这是工作罚款HTTPS而不是HTTP的。 为了让字体真棒图标上的HTTP负载。 我加入以下在位于magento的安装的根目录中的.htaccess。

<FilesMatch ".(ttf|otf|woff)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

文章来源: Font-awesome not properly displaying on Firefox / how to vend via CDN?