Question

Aright，这是我的问题。我的页面上有两个@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到＆＃34;上升＆＃34;你的css文件中的一个目录，如果绝对找到，则以斜杠开头。

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

1 个答案: