複数のソースが@fold-faceにリストされている場合は、すべてがクライアント側にロードされていますか？

Question

私は私のサイトの速度を最適化しようとしたブラウザをお知りになりたいんだだけでは、次のコード、またはすべてのフォントファイルから必要なファイルをロードします：

@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をやっているの？ユーザーの読み込み時間を短縮する他の戦略はありますか？

Answer 1

一般的なブラウザでは、サポートされている形式に応じて、リスト内の最初から順番にフォントをリストに読み込まなければなりません。使用できるフォントファイルを取得すると、残りのファイルはリストにロードされません。ブラウザが特定のフォーマットをサポートしていない場合、は決してそのフォントを読み込もうとしません。それは次のソースにまっすぐに移動し、それを見てください。

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

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

CSSは、この順次アプローチによるロード時間と要求数を最小限に抑えるために、すでに設計されています。フォントが自分のサーバーから到着するのに時間がかかりすぎる場合は、Google Web Fonts、Typekit、またはAdobe Edgeの代わりに高速のCDNを使用することを検討してください。

Answer 2

この質問に答えるために、私は次のW3C文書から関連する通路を引用しています

CSS Fonts Module Level 3
引用材料においてはW3C勧告候補2013年10月3日

（、私はを持っていることに注意してください質問に最も関連する文章をに強調した。）

---

4.1 The @font-face rule

@font-faceルールが自動的に取得され、必要なときに活性化されるフォントにリンクすることができます。これにより、著者 は、指定されたプラットフォーム上で のフォントセットにフォントの選択肢を限定するのではなく、指定された ページの設計目標とよく似たフォントを選択することができます。フォント記述子のセットは、 のフォントリソース（ローカルまたは外部）の位置と、個々の面のスタイル の特性を定義します。 @font-face ルールを使用して、さまざまな顔を持つフォントファミリを構築できます。 CSSフォントマッチングルールを使用すると、ユーザーエージェントは特定のテキストに必要な顔だけを選択的にダウンロードできます。

4.3 Font reference: the src descriptor

この記述子は、フォントデータを含むリソースを指定します。@font-faceルールを有効にするには、 が必要です。その値は の外部参照のカンマ区切りリストまたはローカルにインストールされたフォントフェイス名 です。フォントが必要な場合、ユーザ エージェントはリストされた参照セットを反復処理し、最初の1つを で有効にすることができます。 無効なデータまたはローカル フォントフェースが見つからないフォントは無視され、ユーザーエージェントはリスト内の次のフォント を読み込みます。

...

外部参照は、そのURLによって参照されるフォントリソースのフォーマットを記述するオプションのヒント 続いて、URLから成ります。 フォーマットヒントには、 がよく知られているフォントフォーマットを示すフォーマット文字列のコンマ区切りリストが含まれています。 対応するユーザーエージェントは、 形式のヒントがサポートされていないか、または未知のフォント形式の場合にのみ をスキップしてフォントリソースをダウンロードする必要があります。フォーマットヒントが指定されていない場合、 ユーザエージェントはフォントリソースをダウンロードする必要があります。あなたは（https://speakerdeck.com/jaffathecake/in-your-font-face）[このプレゼンテーションを見る]すべき

 
    /* load WOFF font if possible, otherwise use OpenType font */ 
    @font-face { 
     font-family: bodytext; 
     src: url(ideal-sans-serif.woff) format("woff"), 
      url(basic-sans-serif.ttf) format("opentype"); 
    }