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

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

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

• 无法访问Internet：此页面在用户接受条款和条件之前显示，因此所有内容都被阻止
• 页面存储在访问点上：这意味着一个嵌入式服务器可能是用C编写的，我不能添加额外的头或其他东西。好吧，这是开源的，所以这可能是可能的，但我肯定不是一个嵌入式开发人员
• WiFi被用来为提供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;
}

@font-face{
字体系列：拉托灯；
src:url（数据：application/font-woff；base64）
格式（“woff”）；
}
h1{
字体系列：Lato Light、Helvetica、无衬线；
}

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

---

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

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

正确的woff字体生成器

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

---

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

为了减少HTTP请求，我在CSS中嵌入了subset和Base64两个webfonts（Font Squirrel@Font face generator，advanced settings，对于图标字体，我使用了icomoon.io）

我觉得自己真的很聪明，我从一个静态子域为他们服务……Firefox中没有

事实证明，这是一个限制性的跨域资源设置，显然是Firefox独有的。当我上传HTML5样板文件“standard”.htaccess文件时，它特别允许它，并且解决了这个问题

---

希望它能帮助未来的读者，这让我困惑了一段时间……很抱歉，如果我的术语不够精确，我在这方面还是很新的（在H5BP.htaccess评论和文档中有很好的解释）。

你不能在已经服务于此页面的同一访问点上将字体作为另一个资源使用？也许吧。我还没有探索这种可能性，所以我这样做是为了更糟糕的情况。我还没有接触到真正的硬件，但要求我这么做的人不确定这是否可行。不过，我的问题更多：嘿，为什么firefox的行为不像其他人？这应该行得通。你有显示问题的页面链接吗？在我的答案中使用字体生成器，它可以工作。我有一个嵌入字体的页面，在每个浏览器中都能很好地显示，我现在正在查看它。但是，如果您只是在Google中键入“woff font converter”，您可能会遇到与我（）相同的无效字体生成器。这很容易，因为这是我在谷歌上的第二个结果。我给他们发了一个bug报告，但还没有回复。所以当转换成base64时就可以了？是的，它可以在每个浏览器上运行。在UNIX上，您可以执行以下操作：

sfnt2woff yourfont.ttf

然后

base64-i yourfont.woff-o yourfont.woff.base64

，然后将yourfont.woff.base64的内容复制/粘贴到html文件中。在：fontsquirrel.com/fontface/generator上，它们修复了此问题，一切正常。其他在线字体生成器不工作的应该是：url（数据：应用程序/x-font-woff非数据：font/woff