可以,如果我得到错误,说字体没有加载,但它们显示在网页上?

问题描述:

我用@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浏览器开发工具,让我 我应该忽略它?因为一切似乎都很好。

+0

为什么你有两个'src'值?我不认为这是'@ font-face'的有效使用。单独的值应该在一个“src”值下合并到一个列表中。 – apsillers 2012-07-30 15:38:23

我会打开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>