Documentation CSS

この記事で学べること

  • font-displayプロパティの概念と目的
  • auto、block、swap、fallback、optionalの各値
  • フォント読み込み中の表示戦略
  • パフォーマンス最適化への活用
  • フォールバックフォントとの整合性

概要

font-displayプロパティは、ウェブフォントの読み込み中にテキストがどのように表示されるかを制御するために使用されます。このプロパティを適切に設定することで、ページのパフォーマンスやユーザーエクスペリエンスを向上させることができます。

構文

@font-face {
    font-family: 'YourFont';
    src: url('yourfont.woff2') format('woff2');
    font-display: auto | block | swap | fallback | optional;
}

パラメータ

  • auto
    デフォルトの表示戦略を使用します。ブラウザが自動的に最適な方法を選択します。
  • block
    フォントが読み込まれるまでテキストが表示されず、最大3秒待機します。読み込まれなかった場合、フォールバックフォントが表示されます。
  • swap
    フォントが読み込まれるまでフォールバックフォントを表示し、読み込まれたらすぐに指定したフォントに切り替えます。
  • fallback
    フォントが読み込まれるまで、フォールバックフォントを表示します。もし時間内に読み込まれなければ、フォールバックフォントを維持します。
  • optional
    フォントの読み込みが失敗した場合、フォールバックフォントを表示し、必要に応じてフォントの切り替えを試みますが、必ずしも切り替えが行われるわけではありません。

説明

font-displayプロパティを使用することで、ウェブフォントの表示戦略をカスタマイズし、パフォーマンスを最適化できます。特に、ユーザーがウェブサイトを訪れた際の初期表示が重要な場合に効果を発揮します。

使用例

以下は、font-displayを使用した基本的な例です。

@font-face {
    font-family: 'MyCustomFont';
    src: url('mycustomfont.woff2') format('woff2');
    font-display: swap;
}

この設定では、MyCustomFontが読み込まれるまでフォールバックフォントが表示され、読み込みが完了次第、カスタムフォントに切り替わります。

注意点

  1. パフォーマンスの影響
    font-displayの値により、ページの初期表示に与える影響が異なります。特にblockは表示を遅延させるため、ユーザーエクスペリエンスに影響を与えることがあります。
  2. デザインとの整合性
    フォントの切り替えが頻繁に行われると、デザインが崩れる場合があります。特にswapやfallbackを使用する際は、フォールバックフォントとの整合性を考慮する必要があります。
  3. ブラウザの互換性
    一部の古いブラウザではfont-displayプロパティがサポートされていないため、ユーザーのブラウザ環境に応じたテストが重要です。

まとめ

font-displayプロパティは、ウェブフォントの読み込み中にテキストがどのように表示されるかを制御する強力なツールです。適切な設定を行うことで、ユーザーエクスペリエンスを向上させ、パフォーマンスを最適化できます。デザインのニーズに応じた最適な値を選択し、効果的に利用しましょう。

ポイントの振り返り

値説明使用例
autoブラウザ任せデフォルト
block読み込みまで非表示重要なフォント
swapフォールバック→切替一般的な使用
fallback短期間待機バランス重視
optional任意の切替パフォーマンス重視

関連プロパティ

プロパティ説明
@font-faceフォント定義
font-familyフォントファミリー指定
srcフォントソース

参考文献

円