如果我收到错误说没有加载字体但它们显示在网页上，这样可以吗？

Question

我使用了@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 Dev工具给我的东西 我应该忽略它吗？因为一切似乎都很好。

Answer 1

我打开Fiddler，看看是否一切都很好。

我假设文件确实在你说的位置。所以我怀疑你遇到了我做的同样的事情。 Chrome对于mime类型很挑剔。但错误信息具有误导性。基本上，当您没有来自服务器的适当mime类型的WOFF文件时，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>