☰

Firefox 无法渲染 Font Awesome webfont 集的图标

tag-icon • tag-icon firefox fonts
Firefox 无法渲染 Font Awesome webfont 集的图标

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

Firefox 中的图标如何显示

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

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

我发现Stack Overflow 上的这个问题这也许可以解释为什么会发生这种情况——CSS 确实使用单引号将字体的 src 位置括起来。但是，我对 Khan Academy 服务器没有任何写入权限，因此无法修改实际网站。我想知道是否可以在 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 并与 Khan Academy 的 CSS 进行比较后，我发现两个代码完全相同除了KA 的 CSS 最后一个属性后面没有分号（如果忽略它被压缩的事实）。缺少分号是否会导致此问题？

答案1

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

附言：CSS 中最后一个属性后面缺少分号才不是导致这个问题。

补充评论：

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

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

答案2

可能不会这回答所提出的疑问，但足够相关，可以帮助那些最终遇到稍微不同的问题但产生与屏幕截图所示相同结果的人。

Firefox 阻止使用不同（子）域上的字体

还阅读了该帖子的评论，他们给出了很好的建议。

答案3

我做了路径更改以正确运行 IE、Firefox 和 Chrome，如下所示：（网址查看）

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

相关内容