Firefox 拒绝加载 @webfont--但不一致

Question

好的，这是我的问题。我的页面上使用了两个 @webfont 声明：

@font-face {
font-family: 'BebasNeue';
src: url('.../bebasneue-bebasneue.eot'); /* IE9 Compat Modes */
src: url('.../bebasneue-bebasneue.eot#iefix') format('embedded-opentype'); /* IE6-IE8 */
src: url('.../bebasneue-bebasneue.woff') format('woff'); /* Modern Browsers */
src: url('.../bebasneue-bebasneue.ttf')  format('truetype'); /* Safari, Android, iOS * 
src: url('.../bebasneue-bebasneue.svg') format('svg'); /* Legacy iOS */

}
@font-face {
font-family: 'ChunkFive';
src: url('.../chunksix-webfont.eot'); /* IE9 Compat Modes */
src: url('.../chunksix-webfont.eot#iefix') format('embedded-opentype'); /* IE6-IE8 */
src: url('.../chunksix-webfont.woff') format('woff'); /* Modern Browsers */
src: url('.../chunksix-webfont.ttf')  format('truetype') ;/* Safari, Android, iOS *
src: url('.../chunksix-webfont.svg') format('svg'); /* Legacy iOS */
}

在 Chrome（最新）中都可以正常加载。只有第二个适用于 Firefox（最新）。在 Internet Explorer 11 中都不起作用。 我……老实说有点难过。我对几乎所有可以想象的浏览器都有声明，我只用 src: 前两个 url 的声明（通常使用）（没有改变任何东西）......我想它会更少如果在每个浏览器上都是一个孤注一掷的交易，那将是一个难题，但为什么 Firefox 只支持一个呢？ 注意：我在 Tumblr 工作并从 static.tumblr.com 加载字体。 任何帮助将不胜感激，谢谢！

Answer 1

您在哪个网络服务器上托管您的网站？它是否设置为服务所有这些文件类型？例如，在 IIS 中，您必须添加 MIME 类型以提供 .woff 等。您应该启动 Fiddler，将 Firefox 指向您的页面，并查看 Firefox 是否确实获取了您期望的字体文件，或者是否出现 404 或其他错误。

此外，这是我用于跨浏览器兼容性的典型字体堆栈。最初由Font Squirrel开发：

@font-face{
font-family:"AmbleLight";
src: url('../fonts/Amble-Light-webfont.eot');
src: url('../fonts/Amble-Light-webfont.eot?#iefix') format('eot'),
     url('../fonts/Amble-Light-webfont.woff') format('woff'),
     url('../fonts/Amble-Light-webfont.ttf') format('truetype'),
     url('../fonts/Amble-Light-webfont.svg') format('svg')
}

另外，我刚刚注意到您的网址中有三个点。这是故意的吗？应该是 2 以从您的 css 文件“上移”一个目录，或者如果绝对位于，则以斜杠开头。