web-dev-qa-db-ja.com

Webフォントはいつロードされ、プリロードできますか？

Webフォントを使用しているときに、最初は1秒かかることがあることに気づきました。ドロップダウンナビゲーションメニューを作成する場合のように、初めてメニューにカーソルを合わせると、メニュー全体が1秒間だけ背景色として表示され、その後テキストが表示されます。

これは実際には理想的ではなく、CSSファイルがロードされたときにWebフォントがダウンロードされるのではなく、ページで最初に表示されたときにダウンロードされると私は信じています。

しかし一方で、私はすでにPCにフォントをインストールしているので、ダウンロードする必要はないので、なぜこれを行うのかという疑問が生じます。

Webフォントの読み込みに使用するCSSは次のとおりです。

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular-webfont.eot');
    src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Italic-webfont.eot');
    src: url('../fonts/Roboto-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Italic-webfont.woff') format('woff'),
         url('../fonts/Roboto-Italic-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Italic-webfont.svg#RobotoItalic') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Bold-webfont.eot');
    src: url('../fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Bold-webfont.woff') format('woff'),
         url('../fonts/Roboto-Bold-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Bold-webfont.svg#RobotoBold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Light-webfont.eot');
    src: url('../fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Light-webfont.woff') format('woff'),
         url('../fonts/Roboto-Light-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Light-webfont.svg#RobotoLight') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Medium-webfont.eot');
    src: url('../fonts/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Medium-webfont.woff') format('woff'),
         url('../fonts/Roboto-Medium-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Medium-webfont.svg#RobotoMedium') format('svg');
    font-weight: 500;
    font-style: normal;
}
cssfontswebfonts
24
Brett

Webフォントはいつダウンロードされますか？

Paul Irishは、これをテストするための簡単なページを作成しました： http://dl.getdropbox.com/u/39519/webfontsdemo/loadtest.html

ほとんどのブラウザは、CSSで宣言されているときではなく、ページで使用されているときにフォントをダウンロードすることを示しています。 IEは例外だと思いますが、現在テスト用に実行していません。

宣言ではなく使用時にダウンロードする理由は、不要なネットワークトラフィックを減らすためです。フォントが宣言されているが使用されていない場合。

フォントのダウンロードを回避できますか？

フォントがすでにインストールされている場合は、ダウンロードする必要はありません。 @Patrickが上で述べたように、これはlocal()を使用して実行できます。 CSSではurl()の前に配置され、フォントの名前を取ります（Mac OS XのSafariではPostScript名が後で必要になります）。 CSSに次の変更を加えてみてください。

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular-webfont.eot');
    src: local(Roboto Regular), local(Roboto-Regular),
         url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

最後に、フォントのダウンロード時間を短縮するために、次のことを確認できます。

  • JavaScriptの前にCSSを置く
  • フォントに遠い将来のExpiresヘッダーを追加する（ブラウザーがフォントをキャッシュするように）
  • フォントのGZipping

フォント表示の遅延への対処の概要は次のとおりです。 http://paulirish.com/2009/fighting-the-font-face-fout/

20
tagawa