可以,如果我得到错误,说字体没有加载,但它们显示在网页上?
问题描述:
我用@font-face
可以,如果我得到错误,说字体没有加载,但它们显示在网页上?
@font-face { // body font
font-family: 'Sofia Pro Light';
src: url('../library/fonts/Sofia Pro Light/SofiaProLight.eot');
src: url('../library/fonts/Sofia Pro Light/SofiaProLight.eot?#iefix') format('embedded-opentype'),
url('../library/fonts/Sofia Pro Light/SofiaProLight.woff') format('woff'),
url('../library/fonts/Sofia Pro Light/SofiaProLight.ttf') format('truetype'),
url('../library/fonts/Sofia Pro Light/SofiaProLight.otf') format('opentype'),
url('../library/fonts/Sofia Pro Light/SofiaProLight.svg#font-name') format('svg');
font-weight: normal;
font-style: normal;
}
这里就是Chrome浏览器开发工具,让我 我应该忽略它?因为一切似乎都很好。
答
我会打开Fiddler,看看是否一切正常。
我假设文件真的是你说的地方。所以我怀疑你遇到了同样的事情。 Chrome对mime类型很挑剔。但错误信息是误导性的。基本上,当你没有适合WOFF文件的适当的MIME类型时,Chrome将会故障转移到另一种字体格式。在这种情况下,它将首先故障转移到TTF字体。这意味着Chrome会下载两种不同的字体格式。只是,它看起来像TTF字体也出现错误,因此Chrome可能会在您的情况下下载3种不同的格式。
所以这是值得修复的。您只需将服务器配置为发送application/x-font-woff
作为WOFF文件的MIME类型。
例如,在ASP.NET你要补充这在web.config ...
<system.webServer>
<staticContent>
<mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
</staticContent>
</system.webServer>
为什么你有两个'src'值?我不认为这是'@ font-face'的有效使用。单独的值应该在一个“src”值下合并到一个列表中。 – apsillers 2012-07-30 15:38:23