4

我正在为公共 wifi 接入点设计一个启动页面，而 Firefox 拒绝显示我的自定义字体，而它在所有其他浏览器中都可以使用（嗯，不是 IE < 9，但这是意料之中的）。

该页面需要在以下约束中工作：

  • 无法访问互联网：在用户接受条款和条件之前显示此页面，因此所有内容都被阻止
  • 该页面存储在访问点上：这意味着嵌入式服务器可能是用 C 编写的，我不能真正添加​​额外的标题或其他东西。好吧，它是开源的，所以它可能是可能的，但我肯定不是嵌入式开发人员！
  • WiFi 用于宣传提供它的小镇，所以它应该尽可能漂亮。

为了满足这些约束，我使用了带有数据 uri 的 @font-face，如下所示：

@font-face {
    font-family: Lato-Light;
    src: url(data:application/font-woff;base64,<large base64 string>) 
         format('woff');
}

h1{
    font-family: Lato-Light, Helvetica, sans-serif;
}

它就像一个魅力......除了在 Firefox 中。现在我知道它不适用于旧版 IE，但我已经准备好使用它。但我觉得奇怪的是，所谓的现代浏览器不提供该功能。为什么这不起作用？

编辑：当然，我对后备有很多想法，但我的问题更多：为什么 Firefox 的这种行为与其他浏览器不同？是安全设置吗？data-uri 实现中的错误？数据uri的大小限制？

4

2 回答 2

4

最后，问题是我使用了产生错误字体的 woff 字体生成器。Safari 和 IE 能够读取它，但 Firefox 和最新版本的 Chrome 拒绝它，因为它包含一些错误。通过使用更新的 woff 字体生成器，我能够让它在所有浏览器中运行。

正确的 woff 字体生成器

http://people.mozilla.org/~jkew/woff/

有关更多详细信息，请检查错误报告：

https://bugzilla.mozilla.org/show_bug.cgi?id=735556

我要感谢 Mozilla 的 Jonathan Kew 提供了答案。

于 2012-03-16T03:50:14.570 回答
-1

为了减少 HTTP 请求，我将子集和 Base64 嵌入到我的 CSS 中（Font Squirrel @font-face 生成器、高级设置以及我使用 icomoon.io 的图标字体）。

以为我真的很聪明，我从静态子域为他们提供服务……在 Firefox 中不行。

原来这是一个限制性的跨域资源设置，显然是 Firefox 独有的。当我上传 HTML5 Boilerplate 'standard' .htaccess 文件时，它特别允许它并解决了这个问题。

希望它对未来的读者有所帮助，它让我难过一阵子......对不起，如果我的术语不够精确，我在这方面还是很陌生（在 H5BP .htaccess 评论和文档中有很好的解释）。

于 2012-09-02T07:20:12.263 回答