ブラウザは@ font-face文で不要なファイルをダウンロードしますか？

Question

"このシステムフォントAをお持ちの場合はそれを使用し、それ以外の場合はフォントBをダウンロードして使用する"という行に沿ってロジックを使用してWebページのフォントを選択したいと考えています。私はそうのようにCSSでこれを行うことができます

：

@font-face { 
    font-family: B; 
    src: url('B.ttf'); 
} 

p { 
    font-family: A, B; 
} 

私の質問です：システムは（すなわち、フォントBが実際に文書をレンダリングするために必要とされることはありません）がインストールされてフォントがある場合は、B.ttfダウンロードされますブラウザごとに異なるのでしょうか？

Answer 1

B.ttfファイルがフォントAがシステムに利用可能であり、ブラウザがバックフォントB. CSS3フォントモジュールから言い換え

に落下するを必要としませない場合でも、要求することができますスペック、§4.7 Font loading guidelines、関連するコードスニペットを：それはフォントのリストに記載されていますが、実際に与えられたために使用されていない場合、フォントは文字のフォールバックケースにダウンロードされる可能性があります場合には

、ユーザエージェントは、フォントをダウンロードすることができますテキストが実行されます。

@font-face { 
    font-family: GeometricModern; 
    src: url(font.ttf); 
} 

h2 { 
    /* font may be downloaded for pages with h2 elements, 
    even if Futura is available locally */ 
    font-family: Futura, GeometricModern, sans-serif; 
} 

それは要件（すなわち、「かもしれない」ではなく、「必須」）ではありませんので、それは彼らのブラウザはそれは必須ではありません場合でも、フォールバックの使用のためのWebフォントをダウンロードするかどうかのベンダーの選択です。私が知る限り、FirefoxはB.ttfをダウンロードし、SafariとGoogle Chromeは（私はまだOperaやIEでテストさえしていない）ようだ。

このように、この動作はブラウザによって異なるように見えますが、このようなシナリオでは間違いはありません。