0

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

4

1 回答 1

1

我会打开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>
于 2012-09-12T18:27:52.553 回答