Question

我无法在firefox中正确显示font-awesome，即使在localhost中也是如此。我收到以下跨域错误：

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"); }

我使用了这篇文章建议的双引号：firefox @font-face fail with 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

This为我解决了Firefox跨域字体问题（导致Firefox中无法加载字体）。只需将以下内容添加到.htaccess或直接添加到apache config：

<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

根据this，我通常会发现添加一个本地声明修复此问题。 e.g：

@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，则需要add a CORS Policy。 S3故意不允许您在上传期间设置标题，因为您需要使用该策略。

此政策配置可以为您解决问题：

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

这将使得Firefox和Internet Explorer（IE）上的CDS可以使用Font-Awesome。

字体真棒没有正确显示在Firefox /如何通过CDN售卖？

4 个答案: