ウェブフォントをロードする方法

8362 ワード

カスタムWebフォントは、世界中どこでも使用されていますが、多くの(多くの)多くのサイトは、パフォーマンスの問題、非常に長い読み込み時間、ブロック化されたレンダリングとフォントのナビゲーション中にスワップされたページ読み込み中に多くの問題を不適切に引き起こします.
私は多くの開発者がこの引数を無視しているのを見ます、あるいは、多分、彼らは何度も何度も同じエラーをします.
私はこのループを中断し、2018年に正しいことを始めるべきだと思います.カスタムWebフォントの読み込みには4つの手順があります.

正しいフォント形式を使う

プリロードフォント

正しいフォントフェイス宣言

フォント読み込み中に目に見えないテキストを避ける

これらのポイントを一度に1つに直面して破壊を開始しましょう.

正しいフォント形式を使う

Web上で使用することができる多くのフォント形式がありますが、IE 8以下をサポートしていない場合、2つの形式だけが本当に必要ですwtf?! ): woff and woff2 . これらは、デフォルトでgzipされているために使用する必要があります2つのファイルの種類です(非常に小さいです)とWebのために最適化され、見ることができるように、彼らは完全にIE 9 +と他のすべての緑のブラウザによってサポートされています.

プリロードフォント

カスタムフォントを使用する場合は、適切なタグとrel 属性

  <link rel="preload" as="font" href="fonts/cicle_fina-webfont.woff2" type="font/woff2" crossorigin="anonymous">
  <link rel="preload" as="font" href="fonts/zantroke-webfont.woff2" type="font/woff2" crossorigin="anonymous">

Note that the use of crossorigin here is important; without this attribute, the preloaded font is ignored by the browser, and a new fetch takes place. This is because fonts are expected to be fetched anonymously by the browser, and the preload request is only made anonymous by using the this attribute.

上の例ではrel="preload" as="font" 属性は、ブラウザに必要なリソースをできるだけ早くダウンロードを開始するよう要求します.また、これはフォントであることをブラウザに伝えるので、リソースキューに適切に優先順位を付けることができます.使用preload hints Webフォントのパフォーマンスと初期ページの負荷に劇的な影響を与えるでしょう.preloadとprefetchヒントをサポートするブラウザは、HTMLファイルのヒントを見て、CSSを待つ必要がなくなるとすぐに、Webフォントをダウンロードし始めます.
代わりにrel="prefetch" 属性は、リソースに低優先度を割り当てるようにページロードまたはユーザーアクション中に最近必要とされる可能性があるリソースのダウンロードを準備するためにブラウザに指示する.
注意:
あなたがGoogleフォントのようにCDNを使っているなら、あなたがプリロードしているフォントファイルがCSSのものと一致することを確認してください.フォントを定期的に更新することができますし、新しいバージョンのCSSを使用している場合は、古いバージョンをプリロードしている場合は、同じフォントの2つのバージョンをダウンロードして、ユーザーの帯域幅を無駄に終わる可能性があります.使用を検討する <link rel="preconnect"> 👨🏼‍🔬 代わりに、より簡単なメンテナンス.

正しいフォントフェイス宣言

フォントの顔の家族を宣言するのは非常に簡単ですが、我々はそれを行うときにいくつかのことを気にする必要があります.カスタムフォントファミリーを宣言する正しい例を次に示します.

@font-face {
  font-family: 'Custom Font';
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* Read next point */
  unicode-range: U+000-5FF; /* Download only latin glyphs */
  src: local('Custom Font'),
       url('/fonts/custom-font.woff2') format('woff2'), 
       url('/fonts/custom-font.woff') format('woff');
}

Unicode range from Google Web Fundaments

見ることができるように、我々は最適化されたフォント(WoffとWoff 2)を使います、そして、我々は必要なグリフ範囲だけをダウンロードするためにブラウザに話しますU+000 to U+5FF ). また、通知する2つの詳細がありますlocal() 関数とフォント順序.最初のものは、ユーザーが存在するならば、フォントの彼らのローカルコピーを使用することができます.ブラウザ宣言が宣言順序の後にリソースを取得し始めるので、フォント宣言順序も重要です.Wofft 2形式をサポートしている場合、フォントをダウンロードします.代わりにリソース形式を認識しない場合は、次のいずれかに進みます.本当に使いたいならeot and ttf フォントは、src 宣言.

資源

Glyphs range generator エリフィッチ

unicode-range

Modern Font Face generator

フォント読み込み中に目に見えないテキストを避ける

フォントは、しばしばgzipでさえロードするのにしばらくかかる大きなファイルです.これに対処するために、いくつかのブラウザがフォントを読み込むまでテキストを隠します.あなたは“フラッシュ”を避けることができますし、すぐにシステムフォントを使用してユーザーにコンテンツを表示し、それを置き換える.
前に@font-face あなたが気づくことができる例 font-display 宣言.The swap 値は、このフォントを使用しているテキストがシステムフォントを使用してすぐに表示されることをブラウザに指示します.カスタムフォントが準備されると、システムフォントがスワップアウトされます.
もしbrowser does not support font-display これは、フォントの読み込みには、デフォルトの動作を続けている.
ブラウザ
フォントが準備ができていないならば、デフォルトふるまい.