概要

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