0

WebFontLoaderを使用してフォントを読み込むのが好きです。それは私にとってうまくいった迅速な解決策です。私は通常、自分のページに次のようなものを配置して、非同期で使用します<head>。

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js" async></script>

WebFontConfig = {
  google: {
    families: ['Droid Sans', 'Droid Serif']
  }
};

次に、CSS で次のようにします。

h1 {
  font-family: 'Droid Sans', Helvetica, Arial, sans-serif;
}

私は最近 WebFontLoader について読んでいますが、私が目にするほとんどの例 (これに関する 1 つの記事があります) では、WFL が<html>要素に適用するクラスを使用して、フォントが読み込まれて準備ができているかどうかを検出します。使用する：

h1 {
  font-family: Helvetica, Arial, sans-serif;

  .wf-active & {
    font-family: 'Droid Sans', Helvetica, Arial, sans-serif;
  }
}

私の質問は: システム バックアップを使用して通常のフォント スタックを宣言するだけでは不十分なのはなぜですか? font- familyのポイントは、最初のものが認識されない場合、自動的に他のものにフォールバックすることではないでしょうか?

ブラウザが、スタック内の最初のフォントがシステム フォントではないことを認識した場合、バックアップがあるにもかかわらず、デフォルトでその要素を非表示にするか、またはそのようなものでしょうか?

4

1 に答える 1