29

私は自分のサイトの速度を最適化しようとしており、ブラウザが次のコードまたはすべてのフォント ファイルから必要なファイルのみをロードするかどうかを知りたいです。

@font-face {
    font-family: 'Proxima Nova';
    src: url('proximanova-regitalic-webfont.eot');
    src: url('proximanova-regitalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('proximanova-regitalic-webfont.woff') format('woff'),
         url('proximanova-regitalic-webfont.ttf') format('truetype'),
         url('proximanova-regitalic-webfont.svg#proxima_nova_rgitalic') format('svg');
    font-weight: normal;
    font-style: italic;
}

また、これは @font-face を行う最も最適な方法ですか? ユーザーの読み込み時間を短縮する他の戦略はありますか?

4

2 に答える 2

29

通常のブラウザは、サポートするフォーマットに応じて、リストの最初から順に、リスト内のフォントをロードしようとする必要があります。使用できるフォントファイルを取得すると、リスト内の残りのファイルをロードしようとはしません。ブラウザが特定の形式をサポートしていない場合は、そのフォントを読み込もうとしないでください。次のソースに直接移動して、それを確認する必要があります。

これは、ブラウザがプロパティでフォントスタックを使用する方法と似ていfont-familyます。

もちろん、すべてのブラウザが仕様に準拠して動作するわけではありません。IEのような一部のブラウザは、できるだけ多くのフォントをダウンロードしたり、予期しない方法でルールを解析したりしようとします。詳細と調査については、コメントを参照してください。

CSSは、このシーケンシャルなアプローチを通じて、読み込み時間とリクエスト数を最小限に抑えるようにすでに設計されています。フォントが自分のサーバーから届くまでに時間がかかりすぎる場合は、代わりにGoogle Web Fonts、Typekit、AdobeEdgeなどの高速CDNを使用することを検討してください。

于 2012-11-28T16:04:28.210 に答える