12

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

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

谢谢你的帮助！

4

5 回答 5

22

这为我解决了 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

于 2013-01-13T21:30:52.473 回答
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，或者可能没有能力进行此类覆盖。

于 2012-10-21T10:53:14.833 回答
2

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

于 2013-06-12T20:30:23.330 回答
2

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

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

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

这将使 Font-Awesome 从 Firefox 和 Internet Explorer (IE) 上的 CDS 工作。

于 2013-08-04T17:33:39.300 回答
0

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

<FilesMatch ".(ttf|otf|woff)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>
于 2017-02-24T06:25:34.810 回答