Webフォント読み込み方式最適化のまとめ

一般的に、開発者はウェブフォントと比較的接する機会が少なく、使用するのはfont-familyと、場合によってはいくつかのウェブフォントだけです。

@font-face {
  font-family: 'family-name';
  src: url('${url}');
}
.main {
  font-family: 'family-name';
}

しかし、実際の開発現場では、フォントの切り替えに加え、ロディングエフェクトなど、より多くの問題が発生することが多いのです。

画像

Webフォントの読み込みに関する問題点と、ベストプラクティスをまとめました。

FOIT

通常、フォントファイルを読み込む前に、ブラウザは代替フォントを使ってテキストを表示しますが、これをFOIT（Flash of Unstyled Text）と呼びますが、IE以外のブラウザはシステムフォントを表示する前に3秒間待機するため、3秒間のテキストの白い点滅現象が発生し、このユーザー体験は非常に悪いものとなっているようです。

フォント表示

これに対応するため CSS Fonts Module Level 3 CSS Fonts Module Level 3 に a font-display プロパティが追加されました。このプロパティにより、ブラウザは代替フォントを直ちに使用することができ、ウェブフォントが読み込まれて再レンダリングされると同時に代替フォントに置き換わります。

その関連記述は以下の通りです。

• auto：ブラウザのデフォルトの動作を使用します。
• block：ブラウザはまずページ上のテキストを不可視テキストに置き換え、フォントの読み込みが終了するのを待ってから表示します。
• swap：設定されたフォントがまだ利用できない場合、ブラウザはまず代替フォントを使用して表示し、設定されたフォントの読み込みが終了した時点で代替フォントに置き換えます。
• fallback: swap属性とほぼ同じ動作ですが、ブラウザはセットフォントの読み込みに制限時間を設定し、それ以上かかるとセットフォントは代替フォントに置き換わって表示されなくなります。WebkitとFirefoxで3s。
• は任意です。このプロパティを使用する場合、設定されたフォントが制限時間内にロードされないと、現在のページは常に代替フォントを使用し、設定されたフォントは次のビューで直接使用できるようにバックグラウンドでロードされ続けます。

そこで、次のようにすればよい。

@font-face {
  font-family: 'family-name';
  src: url('${url}');
  font-display: swap;
}

CSS Font Loading API

CSS Font Loading API は、読み込みイベントをリスニングし、読み込み後にクラスを置き換えて font-display: swap の効果を実現することができます。

APIは比較的シンプルに使えるので、説明することはあまりありません。

const font = new window.FontFace('fontFamilyName', 'url(${url})');
document.fonts.add(font);
font.load().then(info => {
  document.body.style.fontFamily = 'fontFamilyName';
}).catch(err => {
  console.log(err);
});

AJAX + Base64

また、CSS Font Loading APIは、フォントの読み込みプロセスを監視することができるため、動的なフォント読み込みやフォント切り替えなどの機能を簡単に実現することができます。

上記2つの解決策は新しいものであり、多少の互換性はあるでしょう。また、AJAXを使用してフォントを読み込み、それをbase64に変換してフォントの読み込みプロセスを監視することも可能です。

function fetchFont(url) {
  return fetch(url)
    .then(response => {
      if (response.status ! == 200) {
        return Promise.reject(response);
      }
      return response.blob();
    })
}

function font2base64(blob) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onloadend = _ => {
      resolve(reader.result);
    };
    reader.onerror = err => {
      reject(err);
    }
    reader.readAsDataURL(blob);
  });
}

fetchFont(url)
  .then(blob => {
    return font2base64(blob);
  })
  .then(res => {
    const base64Url = ('' + res).replace('data:application/octet-stream;base64', 'data:application/x-font-woff;charset=utf-8;base64');
    // Generate the font-face definition, don't write much
    document.body.style.fontFamily = 'fontFamilyName';
  })
  .catch(err => {
    console.log(err);
  });

以下はfetchの例です。他のAJAXフレームワークを使用することもできます。

また、ここで生成されるbase64文字列の処理が必要ですが、ここで生成されるMIMEはapplication/octet-streamで、application/octet-streamは未知のアプリケーションファイルを指すので、手動でタイプをfontに指定しないと、フォント定義がうまくいきません。

画像

フォントファイルが小さい場合は、フォントコンテンツを直接base64で生成し、ページに埋め込むとよいでしょう。

テキストに記載されているメソッドは、サードパーティのライブラリに依存していない、いくつかのサードパーティのフォント読み込みライブラリのオンラインは、多かれ少なかれ同じでなければならない、より完璧なフォントの読み込みができますがありますが、またいくつかの奇妙な卑猥な技術を排除しない、ここにも深く見ていない、興味のある友人は、深さで勉強することができます。

以上、この記事の内容はすべて、私はそれがあなたの学習のために役立つことを願って、私はあなたがより多くのスクリプトハウスをサポートすることを願っています。