css - 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 文件“向上”一个目录，或者如果绝对定位则以斜杠开头。