Question

我正在为公共wifi接入点设计一个启动页面，而Firefox拒绝显示我的自定义字体，而它在其他所有浏览器中都有效（好吧，不是IE＆lt; 9，但这是预期的）。

页面需要使用以下约束：

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

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

@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实现中的一个错误？ data-uri的大小限制？

Answer 1

最后，问题是我使用了一个产生错误字体的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提供答案。

Answer 2

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

认为我非常聪明，我从一个静态子域服务他们......没有去过Firefox。

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

希望它可以帮助未来的读者，它让我感到难过......抱歉，如果我的条款缺乏准确性，我仍然很擅长（在H5BP .htaccess评论和文档中有很好的解释）。

如何在Firefox中使用@ font-face的数据uri

2 个答案: