Font-display の値
最終更新日 :
2023年7月11日
font-display 設定を使用して、web フォントのパフォーマンスを変更する方法を説明します。
font-display 設定を使用すると、web フォントを web ブラウザーに読み込んで web サイトに適用する方法を指定できます。 font-display には、次の 5 つのオプションがあります。
|
|
ビヘイビアー |
|---|---|
|
Auto |
ブラウザーで、デフォルトの方法を使用してフォントを読み込むことができます。 |
|
Block |
Web フォントがダウンロードされるまで、web サイトのテキストを非表示にします。 Web サイトにアクセスしたユーザーには、このオプションで、非表示テキストを示す Flash、つまり FOIT が表示される場合があります。 |
|
Swap |
Web フォントがダウンロードされるまで、CSS で設定したフォールバックフォントを表示します。 web サイトの訪問者には、このオプションを使用するとスタイルなしテキストのフラッシュまたはFOUTが表示される場合があります。 |
|
Fallback |
block ビヘイビアーを短時間使用し、swap ビヘイビアーに切り替えて、フォールバックフォントをテキストに適用します。スワップ期間の終了までに Web Fonts が読み込まれていない場合、フォールバックフォントが引き続き使用されます。 |
|
Optional |
block ビヘイビアーを短時間使用した後、フォールバックフォントをテキストに適用します。 この値により、web ブラウザーには web フォントを全くダウンロードしないオプションが提供されます。例えば、web サイトの訪問者が低速のインターネット接続を使用している場合などです。 |
font-display とサポートされている値の技術的な詳細については、CSS Fonts Module Level 4 の仕様を参照してください。
メモ
デフォルトでは、web フォントプロジェクトは、font-display が auto に設定された状態で作成されます。
font-display 設定をカスタマイズするには、次の手順に従います。
web プロジェクトページで「プロジェクトを編集」をクリックします。
サイドバーから次の font-display 値のいずれかを選択します。デフォルトでは、web フォントプロジェクトの font-display 設定は auto に設定されています。
「変更を保存」をクリックすると、font-display の値が数分以内に web サイトに適用されます。
新しい font-display 設定は、既存の埋め込みコードの一部として web サイトに自動的に含まれます。
既存の web プロジェクトの更新
2020 年 9 月に、アドビの web フォントの読み込みに font-display のサポートが追加されました。 2020年9月以前に作成された web プロジェクトは、デフォルトのfont-display: auto動作を使用するように更新されています。
既存のプロジェクトの font-display 設定は、上記の手順に従って変更できます。 変更を保存すると、新しい font-display 設定が既存の埋め込みコードの一部として web サイトに含まれます。 web サイト自体に変更を加える必要はありません。
