パフォーマンスのためのWebフォントの最適化：最先端

この記事は、サイトグラウンドパートナーシップの貢献です。 スポンサーをサポートしていただきありがとうございます ウェブサイトの67％がカスタムWebフォントを利用しています。 ただし、この広範な採用には、パフォーマンスとユーザーエクスペリエンスの課題があります。 この記事では、Webフォントの実装の一般的な落とし穴を調査し、確立された回避策や将来の策略標準などのソリューションを提供します。

キーポイント：

ウェブサイトの67％で使用されるカスタムWebフォントは、サイズと読み込み時間のためにパフォーマンスとユーザーエクスペリエンスに悪影響を与える可能性があり、目に見えないテキスト（FOIT）のフラッシュを引き起こす可能性があります。 カスタムフォントの最適化には、書体の最小化、ブラウザ互換形式（Woff2の優先順位付け）、必要なスタイルのみのロード、文字セットの制限が含まれます。 FOITと戦うには、システムフォントの使用、非同期負荷にWebフォントローダーを使用するか、粒状制御用のCSSフォントロードAPIをレバレッジすることを検討してください。

css

プロパティは高度なフォントロード管理を提供していますが、ブラウザーのサポートは不完全なままです。
• スタイルのないテキストのフラッシュ（FOUT）が持続する可能性がありますが、カスタムフォントとフォールバックフォントメトリック（X-Heightと幅）を調整することでその影響を減らすことができます。
• カスタムWebフォントの魅力：
• ウェブサイトの訪問者はコンテンツを優先します。 したがって、例外的なタイポグラフィは、読みやすさ、読みやすさ、ブランドのアイデンティティに不可欠です。 カスタムWebフォント - フォントユーザーデバイスにプリインストールされていないフォント - 優れたタイポグラフィデザインを削除します。 CSS ルールは広範囲にわたる採用を可能にしましたが、フォントファイルの固有のサイズはサイトのパフォーマンスに影響を与える可能性があります。 効率的なフォントの読み込みが最重要です font-display
目に見えないテキストのフラッシュ（foit）の理解：

カスタムフォントを使用する典型的な方法（CSS

を介してそれらを定義し、デフォルトのブラウザの動作に依存する方法は次のとおりです。 ブラウザは、CSSの解析が完了するまでフォントの読み込みを遅らせることがよくあります。 さらに、Zach Leathermanがハイライトするように、フォントのダウンロードには特定の条件が必要です。 指定された。

を使用したHTML要素

webkitおよびblinkブラウザでは、要素が空ではないはずです。@font-face ユニコード範囲の記述子をサポートするブラウザの場合、コンテンツは指定された範囲と一致する必要があります。

この遅延ダウンロードは、フォントがロードされるまでFOIT：TEXT Invisibilityになることがよくあります。 FOITのブラウザの処理は異なります：

• linkとfirefoxは3秒のタイムアウトを使用します。フォントが読み込まれない場合、フォールバックフォントが表示され、潜在的にFout（スタイルのないテキストのフラッシュ）につながる可能性があります。
Safari、Androidのデフォルトブラウザ、およびBlackBerryはフォントがロードされるまでテキストを表示しないため、ユーザーは空白のスペースを残します。
• ie/edgeフォールバックフォントを直接表示します。これは、よりユーザーフレンドリーなアプローチです。
• FOUTはFOITよりも破壊的ではありませんが、理想的には両方とも避ける必要があります。 ただし、多くの専門家は、FOUTよりもFOUTを好むと考えています

カスタムフォントファイルの最適化：

いくつかの戦略は、フォントファイルサイズを最小限に抑えます：

製造の最小化：

少数の慎重に選択したフォントを使用します。

1. ブラウザー互換形式：

   Woff2に優先順位を付け、Woffに戻ります。 例：

2. 必要なスタイルのみをロード：

   <code class="language-css">@font-face {
     font-family: 'Open Sans';
     src: local('Open Sans'), local('OpenSans'),
          url('fonts/open-sans.woff2') format('woff2'),
          url('fonts/open-sans.woff') format('woff');
   }</code>

   未使用のフォントのバリエーション（イタリック、太字など）のロードを避けます。

3. サブセット文字セット：

   ページで使用されている文字のみを含めます。 （詳細については、Dudley Storeyの「CSS Font Subsettingを使用したスラッシュページの読み込み時間」を参照してください。

4. foitのアドレス指定：

いくつかの方法は、foitを軽減します：

カスタムフォント（システムフォントへのフォールバック）を避けてください：

審美的にはあまり心地よいにもかかわらず、ソリューションはシステムフォントのみに依存することです。 例：

1. Web Font Loader：

   このJavaScriptライブラリは、カスタムフォントが使用可能になるまでフォールバックを表示し、フォントを非同期にロードします。

   <code class="language-css">body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   }</code>

2. cssフォントロードAPI：この標準APIは、フォントロードを微調整した制御を提供し、カスタムフォントの準備が整うまでシステムフォントの使用を可能にします。 （チュートリアルについては、Manuel Matuzovicの「CSSフォントの読み込みを始めましょう」を参照してください）。

3. 未来：css

   ：

   CSS
プロパティは、フォントの読み込みとフォールバックの動作をきめぶし制御します。 値には、

、

、、font-display、およびが含まれます。 ブラウザのサポートはまだ限られていますが、Webフォントの読み込みの将来を表しています。

FOUTの緩和：font-displayauto block上記の方法はFOITに対応していますが、FOUTは引き続き発生する可能性があります。 その影響を最小限に抑えるには、Monica DinculescuのFont Style Matcherなどのツールを使用して、フォールバックフォントのX-Heightと幅をカスタムフォントの寸法に一致させることを伴います。 swapfallback結論：optional

効率的なWebフォント管理には、ファイルサイズを最適化し、フォントの読み込み動作を制御する必要があります。 ここで説明した方法は、提供されたリソースとともに、ウェブサイトのパフォーマンスとユーザーエクスペリエンスを向上させるための効果的なソリューションを提供します。 よくある質問（FAQ）：

（元の入力のFAQセクションは既によく書かれており、この書き換えには大幅な変更を必要としません。）元のFAQセクションは、そのまま保持されます。

以上がパフォーマンスのためのWebフォントの最適化：最先端の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。