Firefox 无法呈现来自 Font Awesome 网络字体集的图标

Question

在 Firefox (Windows 7) 中，从Font Awesome包调用的图标和字形无法正确呈现。在可汗学院网站上可以看到一个例子。在视频下方，图标显示为带有十六进制代码的框。这意味着它不会被 Firefox 下载。

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

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

作为参考，设置此字体的 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 并与可汗学院的 CSS 进行比较，我发现两个代码完全相同，只是KA 的 CSS 的最后一个属性后面没有分号（如果您忽略它被压缩的事实）。缺少分号会导致这个问题吗？

Answer 1

问题中描述的问题已由可汗学院通过将所有路径从更改为./来解决/fonts/（例如./fontawesome-webfont.ttf更改为/fonts/fontawesome-webfont.ttf）。在我看来，Firefox 无法从特殊的“点”目录（它只是指当前目录）读取文件。

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

补充评论：

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

不正确！字体在其他三个浏览器中正常工作，正如我很久以前已经提到的那样，这意味着字体位于正确的位置。./正如我所解释的，这显然是 Firefox 的路径问题，这迫使 KA 将字体文件移动到不需要的新位置./，从而允许 Firefox 也正确读取字体文件。因此，这是Firefox 如何处理文件的问题。