Question

相关问题here。

Boris对上述问题的回答似乎有道理，但我在我的服务器上安装了Font Awesome文件，问题仍然存在：

enter image description here

我查看了库，发现字体文件包含在安装中，因此关于跨服务器访问字体的参数似乎没有效果。我不介意使用BootstrapCDN，但Boris的建议似乎适用，我不知道如何发送正确的CORS标头。（我尝试过，但它也不起作用。）任何想法如何解决这个问题，使用“Bootstrap CDN”还是“默认CSS”？（另见these instructions。）

PS：IE10正确显示字形。

Answer 1

您是否尝试过Bootstrap CDN？

只需在<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">部分加入<head>即可。字体文件也将自动从CDN加载。

在Firefox上查看此内容并且效果非常好。

@Boris说：

Firefox只允许字体的跨域链接，如果字体所在的服务器发送正确的CORS标题。

很明显， CDNs职责设置正确的标题，不是你的。他们似乎正确地做到了，因为Firefox并没有抱怨。

如果您在自己的服务器上托管字体，请注意，跨域规则可能仍然适用，例如：如果domain.com未发送正确的标头，www.domain.com可能无法访问www.domain.com下的字体文件位置。

阅读this answer了解有关绕过跨子域限制的提示 - 这可能对您的情况有所帮助。

Answer 2

如果您是自己服务器的所有者，则可以添加http标头来处理该问题。基于跨域策略的问题。

foo.com/font-awesome.woff

boo.com/index.htm

在这种情况下，您应该将该标题添加到foo.com

Access-Control-Allow-Origin = "http://boo.com"

或

Access-Control-Allow-Origin = "*"

这将使您的字体文件可以从其他网站或特定网站访问。

Answer 3

我遇到同样的问题，我们使用micro httpd在路由器板上使用字体。我添加了Access-Control-Allow-Origin：*标题但不适用于我。

我在firebug中发现woff文件没有在响应文本中撤回任何内容。同样的事情，如果我使用CDN网址，一切正常。所以在本地micro-httpd服务器上需要一些强制头来配置。请告诉我所需的所有字体的确切mime类型。

.ttf“，”application / x-font-ttf“
.eot“，”application / vnd.ms-fontobject“
.woff“，”application / font-woff“
.svg“，”image / svg + xml“

Answer 4

使fontawesome css在本地工作的解决方案是将Fonts文件夹下的文件包含在.html文件（页面）的同一目录中。

例如：截至目前fontawesome无效的文件结构

    prototype\pages\.html files
    prototype\styles\font-awesome\css\font-awesome.min.css
    prototype\styles\font-awesome\css\fonts\fontawesome-webfont.eot,fontawesome-webfont.woff

这里的问题是，对于从file：// URI加载的页面，只有文件系统的同一目录中（或下面）的文件被认为是“相同的原点”，因此将字体放在不同的子树（../font/）表示它将被安全策略限制阻止。由于Firefox默认禁用跨域字体。而是更改文件结构如下：

      prototype\pages\.html files
      prototype\styles\font-awesome\css\font-awesome.min.css
     prototype\pages\fonts\fontawesome-webfont.eot,fontawesome-webfont.woff

将fonts文件夹放在页面目录下修复问题。希望它有所帮助。

Answer 5

在自定义CSS中放入以下内容（对我来说，它解决了该问题）：

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

[class^="icon-"]:before,
[class*=" icon-"]:before
{
  font-family:FontAwesome;
  font-weight:normal;
  font-style:normal;
  display:inline-block;
  text-decoration:inherit
}

Answer 6

确保您的路径正确无误。使用fa类和图标类，如：

fa fa-envelope

并且会很棒......

问候。

FontAwesome不会在Firefox中显示

6 个答案: