如何在 Firefox 中使用带有 @font-face 的数据 uri答案

【问题标题】：How to use a data uri with @font-face in Firefox如何在 Firefox 中使用带有 @font-face 的数据 uri
【发布时间】：2012-03-30 12:04:06
【问题描述】：

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

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

无法访问互联网：在用户接受条款和条件之前显示此页面，因此所有内容都被阻止
页面存储在访问点上：这意味着嵌入式服务器可能是用 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 实现中的错误？ data-uri 的大小限制？

【问题讨论】：

您不能将字体作为另一个资源提供给已提供此页面的同一访问点上的另一个资源吗？
也许吧。我还没有探索这种可能性，所以我这样做是为了应对更糟糕的情况。我还没有接触到真正的硬件，但要求我这样做的人不确定这是否可能。但是，我的问题更多：嘿，为什么 Firefox 的行为不像其他人那样？
这应该可以。您是否有指向显示问题的页面的链接？

标签： firefox css font-face data-uri woff

【解决方案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 提供答案。

【讨论】：

在我的回答中使用字体生成器，它可以工作。我有一个嵌入字体的页面，可以在每个浏览器中正常显示，我现在正在查看它。但是，如果您只是在 Google 中输入“woff 字体转换器”，您可能会遇到与我相同的无效字体生成器 (orionevent.comxa.com/otf2woff.html)。这很容易，因为它是我在 Google 上的第二个结果。我向他们发送了错误报告，但没有收到回复。
那么什么时候转换成base64就可以了？
是的，它适用于所有浏览器。在 UNIX 上，您可以这样做：sfnt2woff yourfont.ttf 然后base64 -i yourfont.woff -o yourfont.woff.base64，然后将 yourfont.woff.base64 的内容复制/粘贴到 html 文件中。
在：fontsquirrel.com/fontface/generator 他们修复了这个问题，一切正常。其他在线字体生成器不工作应该是： url(data:application/x-font-woff not data:font/woff

【解决方案2】：

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

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

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

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

【讨论】：