CSS Font-awesome 无法在 Firefox 上正确显示/如何通过 CDN 出售？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11872404/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Font-awesome not properly displaying on Firefox / how to vend via CDN?
提问by Alan Illing
I can't get font-awesome to display properly in firefox, even in localhost. I'm receiving the following cross domain error:
即使在本地主机中，我也无法在 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"); }
I used double quotes as suggested by this post: firefox @font-face fail with fontawesomebut that didn't resolve the problem.
我按照这篇文章的建议使用了双引号：firefox @font-face 因 fontawesome而失败，但这并没有解决问题。
Everything works fine in Chrome; any suggestions?
在 Chrome 中一切正常；有什么建议？
Beyond fixing the problem in Chrome, how should I vend font-awesome over a CDN given this restriction: http://dev.w3.org/csswg/css3-fonts/#default-same-origin-restriction?
除了解决 Chrome 中的问题之外，鉴于此限制，我应该如何通过 CDN 提供 font-awesome：http: //dev.w3.org/csswg/css3-fonts/#default-same-origin-restriction？
Below is the code from my CSS file:
下面是我的 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;
}
Thanks for your help!
谢谢你的帮助！
回答by István Ujj-Mészáros
Thissolved the Firefox cross domain font issue for me (which causes the font to not load in Firefox). Just add the following to .htaccessor directly to apache config:
这为我解决了 Firefox 跨域字体问题（导致字体无法在 Firefox 中加载）。只需将以下内容添加到.htaccess或直接添加到 apache 配置：
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
There is a webpage with instructions on how to set up CORS with different servers: https://enable-cors.org/server.html
有一个网页，其中包含有关如何在不同服务器上设置 CORS 的说明：https: //enable-cors.org/server.html
回答by spikyjt
I've usually found adding a local declaration fixes this, as per 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");
}
I'm sure the Apache config method is more correct, however you may not be using Apache or may not have the ability to make such overrides.
我确信 Apache 配置方法更正确，但是您可能没有使用 Apache 或可能无法进行此类覆盖。
回答by jeremywoertink
If you're building a rails app (or some other rack based app) take a look at https://github.com/cyu/rack-corsSuper easy to get up and running. You can throw it into application.rbor one of the environment files.
如果您正在构建 Rails 应用程序（或其他一些基于机架的应用程序），请查看https://github.com/cyu/rack-cors超级容易启动和运行。您可以将其放入application.rb或其中一个环境文件中。
回答by Joseph Lust
If you're using AWS Cloudfront as in my case, you'll need to add a CORS Policy. S3 intentionally won't allow you to set the headers during upload because you need to use the policy instead.
如果您像我一样使用 AWS Cloudfront，则需要添加 CORS Policy。S3 故意不允许您在上传期间设置标头，因为您需要改用该策略。
This policy configuration should do the trick for you:
此策略配置应该为您解决问题：
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>
This will get Font-Awesome working from a CDS on Firefox and Internet Explorer (IE).
这将使 Font-Awesome 在 Firefox 和 Internet Explorer (IE) 上从 CDS 工作。
回答by Umar Yousaf
I was having the same issue on magento 2.0. It was working fine on https but not on http. In order to allow font-awesome icons to load on http. I added following in the .htaccess situated on root directory of magento installation.
我在 magento 2.0 上遇到了同样的问题。它在 https 上运行良好，但在 http 上运行不正常。为了允许在 http 上加载字体真棒图标。我在位于 magento 安装根目录的 .htaccess 中添加了以下内容。
<FilesMatch ".(ttf|otf|woff)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
