Firefox无法从Font Awesome网络字体集中渲染图标


20

在Firefox(Windows 7)中,从“ 真棒字体”包中调用的图标和字形无法正确呈现。可汗学院网站上提供了一个示例。视频下方的图标显示为带有十六进制代码的框。这意味着它不会被Firefox下载。

图标在Firefox中的显示方式

它在Chrome(Windows 7),Safari(Mac OS X)和不锈钢(Mac OS X)上的显示方式:

图标在其他浏览器中的显示方式

在Stack Overflow上发现了这个问题,可以解释为什么会发生这种情况-CSS确实使用单引号将字体的src位置括起来。但是,我对Khan Academy服务器没有写权限,因此无法修改实际的网站。我想知道这是否可以在Firefox中修复,以及如何解决。如果可以的话,我可以运行Greasemonkey脚本。我已经尝试过手动下载字体并将其添加到Windows的“字体”文件夹中,但这无济于事。

作为参考,设置此字体的CSS(Firefox无法正确处理)是:

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

更新:我发现Firefox在Font Awesome软件包的网站(上面链接)中正确显示了基于字体的图标。通过检查CSS并将其与Khan Academy的CSS进行比较,我发现这两个代码完全相同,除了 KA的CSS的最后一个属性后面没有分号(如果忽略了压缩的事实)。缺少分号是否会导致此问题?


2
似乎有人投票结束了这个问题。我想知道为什么。我认为这个问题与“超级用户”(一个获得计算机故障帮助的网站)非常相关,因此绝对不能关闭。
ADTC'7年

1
我投票关闭@ADTC,因为这与khancademy无法正确研究其网站的兼容性有关,而不是可以在此处解决的问题。
詹姆斯·默兹

4
令人遗憾的是,仅仅因为我无意间将问题与网站绑定在一起,而不是从一开始就将其纯粹保留为Firefox / CSS问题,现在即使重新措辞将其从网站中解脱出来并使其完全成为Firefox / CSS问题,现在也没有任何价值。无论如何,我最后都添加了一个反例作为更新,它可能显示问题所在。
ADTC'7

5
我对这里的傲慢加上缺乏了解感到失望。问题实际上是,只要对字体文件的请求是跨域的,Font Awesome都会在Firefox中失败。换句话说,在使用CDN分发静态文件的任何站点上。
jasonrr

3
“ KA从错误的位置引用了字体文件” 错误!就像我早在前面提到的那样,这些字体在其他三个浏览器中都可以正常工作,这意味着这些字体位于正确的位置。./正如我所解释的,这显然是Firefox的路径问题,这迫使KA将字体文件移动到不需要的新位置./,从而使Firefox也可以正确读取字体文件。因此,这 Firefox如何处理文件的问题。你错了。
ADTC

Answers:


12

在这个问题中所描述的问题是通过从改变所有的路径的固定由汗学院.//fonts/(例如./fontawesome-webfont.ttf变更/fonts/fontawesome-webfont.ttf)。在我看来,Firefox无法从特殊的“点”目录(仅指当前目录)读取文件。

PS:最后一个属性后的CSS中缺少分号不会导致此问题。

附加评论:

您对.前缀的编辑是服务器问题,而不是Firefox处理文件的方式。KA从错误的位置引用了字体文件- 随机

不对!就像我早在前面提到的那样,这些字体在其他三个浏览器中都可以正常工作,这意味着这些字体位于正确的位置。./正如我所解释的,这显然是Firefox的路径问题,这迫使KA将字体文件移动到不需要的新位置./,从而使Firefox也可以正确读取字体文件。因此,这 Firefox如何处理文件的问题。


此答案是根据Sathya的请求在问题下方的评论流中创建的。
ADTC

2
请注意,此Firefox问题也会影响以开头的路径../
2012年


0

我对路径进行了更改,以正确运行IE,Firefox和Chrome,如下所示:(请参见URL

@font-face{
  font-family:'FontAwesome';
  src:url('ogi/bete/font/fontawesome-webfont.eot?v=3.0.1');
  src:url('/ogi/bete/font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'), 
  url('/ogi/bete/font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
  url('ogi/bete/font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight:normal;
  font-style:normal }
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.