web-dev-qa-db-ja.com

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

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

@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を実行するための最適な方法ですか？ユーザーの読み込み時間を短縮するための他の戦略はありますか？

cssfont-face
24
Hopstream

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

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

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

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

26
BoltClock

この質問に答えるために、私は次のW3C文書から関連する一節を引用しました：

CSSフォントモジュールレベル
W3C候補勧告2013年10月3日

（引用された資料では、質問に最も関連する文を強調していることに注意してください。）

4.1 @font-faceルール

@font-face ルールを使用すると、必要に応じて自動的にフェッチされてアクティブ化されるフォントにリンクできます。これにより、作成者は、特定のページのデザイン目標に厳密に一致するフォントを選択できます。特定のプラットフォームで使用可能なフォントのセットに対するフォントの選択。フォント記述子のセットは、個々の面のスタイル特性とともに、ローカルまたは外部のフォントリソースの場所を定義します。複数 @font-face ルールを使用して、さまざまな面を持つフォントファミリを構築できます。 CSSフォントマッチングルールを使用して、ユーザーエージェントは特定のテキストに必要な面のみを選択的にダウンロードできます。

4.3フォント参照：src記述子

この記述子は、フォントデータを含むリソースを指定します。 @font-face ルールは有効です。その値は、優先順位が付けられた、コンマで区切られた外部参照またはローカルにインストールされたフォントフェース名のリストです。フォントが必要な場合、ユーザーエージェントは、リストされている参照のセットを繰り返し処理し、最初の参照を使用して正常にアクティブ化できます。 無効なデータを含むフォントまたは見つからないローカルフォントフェースは無視され、ユーザーエージェントはリスト内の次のフォントをロードします。

.。

外部参照は、URLと、そのURLによって参照されるフォントリソースの形式を説明するオプションのヒントで構成されます。フォーマットヒントには、よく知られているフォントフォーマットを示すフォーマット文字列のコンマ区切りのリストが含まれています。 フォーマットヒントがサポートされていない、または不明なフォントフォーマットのみを示している場合、準拠ユーザーエージェントはフォントリソースのダウンロードをスキップする必要があります。フォーマットのヒントが提供されていない場合、ユーザーエージェントはフォントリソースをダウンロードする必要があります。

/*可能であればWOFFフォントをロードし、そうでない場合はOpenTypeフォントを使用します*/
@font-face {
 font-family：bodytext; 
 src：url（ideal -sans-serif.woff）format（ "woff"）、
 url（basic-sans-serif.ttf）format（ "opentype"）; 
}
1
DavidRR