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 フォントにフェイルオーバーします。これは、2 つの異なるフォント形式が Chrome にダウンロードされることを意味します。ただ、TTF フォントでもエラーが発生しているように見えるため、Chrome はおそらく 3 つの異なる形式をダウンロードしています。

したがって、これは修正する価値があります。application/x-font-woffWOFF ファイルの 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 に答える