字体真棒无法在 Firefox 上正确显示/如何通过 CDN 销售？答案

【问题标题】：Font-awesome not properly displaying on Firefox / how to vend via CDN?字体真棒无法在 Firefox 上正确显示/如何通过 CDN 销售？
【发布时间】：2012-08-06 00:41:08
【问题描述】：

我无法让 font-awesome 在 Firefox 中正确显示，即使在 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 出售 font-awesome：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;
}

感谢您的帮助！

【问题讨论】：

这应该可以解决您的问题stackoverflow.com/questions/7867920/…
顺便说一句，我发现我更喜欢使用icomoon.io，而不是字体真棒。更精确，更小的文件。
对于其他在这里磕磕绊绊的人，上面 JoeyP 的链接已被删除。如果您的 FF 错误控制台由于跨源问题而显示“可下载字体下载失败”并且您正在运行 Apache 网络服务器，则以下 styu 的答案有效。

标签： css firefox cross-domain font-awesome

【解决方案1】：

This 为我解决了 Firefox 跨域字体问题（导致字体无法在 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

【讨论】：

这只是救了我！谢谢
您可能需要“sudo a2enmod headers”并在此工作之前重新启动 Apache。
当我将它添加到我的 httpd.conf 中时，Apache 之后不会重新启动。这会以某种方式破坏配置吗？
@ArtforLife 您在日志中看到任何错误消息吗？
非常感谢。这是救命稻草。

【解决方案2】：

我在 magento 2.0 上遇到了同样的问题。它在 https 上运行良好，但在 http 上却不行。为了允许字体真棒图标加载到 http。我在位于 magento 安装根目录的 .htaccess 中添加了以下内容。

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

【讨论】：

【解决方案3】：

根据this，我通常发现添加本地声明可以解决此问题。例如：

@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 或者可能没有能力进行此类覆盖。

【讨论】：

【解决方案4】：

如果您像我一样使用 AWS Cloudfront，则需要add a CORS Policy。 S3 故意不允许您在上传期间设置标头，因为您需要改用该策略。

此策略配置应该可以为您解决问题：

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

这将使 Font-Awesome 在 Firefox 和 Internet Explorer (IE) 上的 CDS 中运行。

【讨论】：

这不也为盗链打开了闸门吗？对于图像和网络字体所在的 DigitalOcean Spaces Bucket 也有类似的问题。仍在学习 CORS，但允许起源 **（全部）对我来说听起来很冒险。

【解决方案5】：

如果您正在构建 Rails 应用程序（或其他基于机架的应用程序），请查看 https://github.com/cyu/rack-cors 超级容易启动和运行。您可以将其放入application.rb 或其中一个环境文件中。

【讨论】：