26

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;
}
4

1 に答える 1

24

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/

于 2012-11-07T06:55:10.683 に答える