在Firefox浏览器上无法显示font-face字体

Question

我在其它浏览器上测试过我的@font-face，都能正常显示字体，但在Windows上的Firefox浏览器中，虽然加载了字体资源，但仍然显示回退字体。以下是相关代码：

@font-face {
    font-family: 'VanillaRegular';
    src: url('http://dl.dropbox.com/u/19510731/ttfonts/Vanilla-webfont.eot');
    src: url('http://dl.dropbox.com/u/19510731/ttfonts/Vanilla-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://dl.dropbox.com/u/19510731/ttfonts/Vanilla-webfont.woff'),
         url('http://dl.dropbox.com/u/19510731/ttfonts/Vanilla-webfont.ttf'),
         url('http://dl.dropbox.com/u/19510731/ttfonts/Vanilla-webfont.svg#VanillaRegular');
    font-weight: normal;
    font-style: normal;
}

然后我像这样嵌入它：

.post h3 {
border-bottom:1px solid #c7e7fa;
color:#51514E;
font-size:22px;
font-weight:bold;
line-height:1.4em;
margin:0.25em 0 8px;
padding:0 0 4px;
font-family: "VanillaRegular", Arial, sans-serif;
}

有没有什么我需要为Firefox特别做的事情，还是只需要修改我的代码？

编辑：应该补充说明，使用的是Firefox 8，并且最终产品在Blogger上。

- Space

---

如果将 ttf 字体放在最后会发生什么？而且你需要所有其他的备用字体吗？ - Blender

将ttf放在最后并没有帮助，而其他所有的回退选项都更受欢迎，因为许多使用旧版Internet Explorer的人会访问。 - Space

Answer 1

把这些字体放到您自己的服务器上，它们就可以使用了。Firefox 无法外包字体。

- henryaaron

---

这就是奇怪的地方！它在小型演示页面上可以运行，但是当我将其嵌入到网站上时却无法工作。（顺便说一下，这是在Blogger上） - Space

啊，这样就清楚了。不幸的是，Blogger不允许您托管文件。（这不是我选择的主机... Blogger有时候很烦人！）感谢您的帮助。 :) - Space

看看谷歌网络字体，我个人从未使用过它们，但听说很不错。 - henryaaron

是的，我会使用它们，但必须使用特定的字体Vanilla。不幸的是，谷歌没有这个字体！ - Space

Answer 2

我相信这是因为你有

@font-face {

... Snip

font-weight: normal;
font-style: normal;
}

以及你的 CSS 代码

.post h3 {
... snip

font-weight:bold;

... snip
}

除非你有更多的代码，否则你需要为粗体字另外声明。

请查看css3.info的文章。

- James Khoury

---

这完全有道理，我也尝试过了，但是没有用。依然显示回退字体。 - Space

@空格 等等...我应该先问一下：你使用的是哪个版本？ - James Khoury

@space ... 我忘了，Firefox对字体执行同源规则... http://webfonts.info/wiki/index.php?title=%40font-face_support_in_Firefox - James Khoury

是啊，真糟糕！嗯，也许有一天我会找到一个解决办法。感谢你的帮助！ - Space

@space，你能不能不使用data:方案？http://nimbupani.com/using-data-uris-in-css.html - James Khoury

哇！我完全忘记了那个。它有效了！非常感谢。 - Space