マニュアル キャンセル

font-display 設定を使用した web フォントのパフォーマンスのカスタマイズ

  1. Adobe Fonts ユーザガイド
  2. はじめに
    1. システムおよびサブスクリプション要件
    2. ブラウザーと OS のサポート
    3. コンピューターへのフォントの追加
    4. Web サイトへのフォントの追加
    5. CC Mobile でのフォントの追加
  3. フォントのライセンス
    1. フォントのライセンス
    2. アカウントの管理
    3. Creative Cloud エンタープライズ版のお客様へのライセンス供与について
    4. アカウントへのフォントライセンスの追加
    5. サブスクリプションライブラリからのフォントの削除
    6. 中国で登録された Adobe ID は Adobe Fonts の利用対象外
    7. Creative Cloud サブスクリプションにこれらのフォントが含まれていない理由
    8. 2021 年 9 月に Morisawa フォントを一部提供を停止
  4. フォントの入手と使用
    1. Creative Cloud アプリケーションでの Adobe Fonts の使用
    2. フォントの管理
    3. デスクトップアプリケーションでの見つからないフォントの解決
    4. InDesign でのフォントの使用
    5. フォントとタイポグラフィ
    6. HTML5 Canvas ドキュメントでの web フォントの使用
    7. InCopy でのフォントの使用
    8. Adobe Muse でフォントを使用する方法
    9. Muse での web フォントの使用
    10. フォントファイルのパッケージング
    11. トラブルシューティングガイド:フォントの追加
    12. 追加したフォントがフォントメニューに表示されない
    13. 「1 つ以上のフォントを追加できません」または「同じ名前のフォントが既にインストールされています」
    14. 現在使用しているフォントがフォントメーカーによって更新された場合
  5. Web デザインと開発
    1. Web サイトへのフォントの追加
    2. トラブルシューティングガイド:web サイトへのフォントの追加
    3. HTML 電子メールまたはニュースレターでの web フォントの使用
    4. Accelerated Mobile Pages(AMP)を使用した web フォントの使用
    5. CSS セレクター
    6. font-display settings を使用した web フォントのパフォーマンスのカスタマイズ
    7. 埋め込みコード
    8. ダイナミックサブセットと web フォント提供
    9. フォントイベント
    10. Web フォントが use.typekit.net から読み込まれるのはなぜですか。
    11. サイトが use.typekit.net に接続できない
    12. CodePen での web フォントの使用
    13. ブラウザーと OS のサポート
    14. ドメイン
    15. ローカル開発環境での web フォントの使用
    16. コンテンツセキュリティポリシー
    17. Web フォントの印刷
  6. 言語サポートと OpenType 機能
    1. 言語サポートとサブセット
    2. OpenType 機能の使用
    3. CSS での OpenType 機能の構文
  7. フォント技術
    1. OpenType-SVG カラーフォント
    2. 貂明朝:バージョン 1.000 からのアップデートに関する要点

font-display 設定を使用して、web フォントのパフォーマンスを変更する方法を説明します。

font-display 設定を使用すると、web フォントを web ブラウザーに読み込んで web サイトに適用する方法を指定できます。font-display には、次の 5 つのオプションがあります。

Font-display の値

ビヘイビアー 

Auto

ブラウザーで、デフォルトの方法を使用してフォントを読み込むことができます。

Block

Web フォントがダウンロードされるまで、web サイトのテキストを非表示にします。Web サイトにアクセスしたユーザーには、このオプションで、非表示テキストを示す Flash、つまり FOIT が表示される場合があります。

Swap

Web フォントがダウンロードされるまで、CSS で設定したフォールバックフォントを表示します。Web サイトにアクセスしたユーザーには、このオプションで、スタイルなしのテキストを示す Flash、つまり FOUT が表示される場合があります。

Fallback

block ビヘイビアーを短時間使用し、swap ビヘイビアーに切り替えて、フォールバックフォントをテキストに適用します。Web フォントがスワップ期間の終わりまでに読み込まれていない場合、フォールバックフォントが使用されたままになります。

Optional

block ビヘイビアーを短時間使用した後、フォールバックフォントをテキストに適用します。この値を指定すると、web サイトにアクセスしたユーザーが低速のインターネット接続を使用している場合に、web ブラウザーで web フォントをまったくダウンロードしないように設定することができます。

font-display とサポートされている値の技術的な詳細については、CSS Fonts Module Level 4 の仕様を参照してください。

注意:

デフォルトでは、web フォントプロジェクトは、font-display が auto に設定された状態で作成されます。

font-display 設定をカスタマイズするには、次の手順に従います。

  1. web プロジェクトページで「プロジェクトを編集」をクリックします。

    プロジェクトを編集
    プロジェクトを編集

  2. サイドバーから次の font-display 値のいずれかを選択します。 デフォルトでは、web フォントプロジェクトの font-display 設定は auto に設定されています。

    font display 設定

  3. 変更を保存」をクリックすると、font-display の値が数分以内に web サイトに適用されます。

新しい font-display 設定は、既存の埋め込みコードの一部として web サイトに自動的に含まれます。

既存の web プロジェクトの更新

2020 年 9 月に、アドビの web フォントの読み込みに font-display のサポートが追加されました。2020 年 9 月より前に作成された web プロジェクトは、デフォルトの font-display である auto ビヘイビアーを使用するように更新されました。

既存のプロジェクトの font-display 設定は、上記の手順に従って変更できます。変更を保存すると、新しい font-display 設定が既存の埋め込みコードの一部として web サイトに含まれます。Web サイト自体を変更する必要はありません。

 Adobe

ヘルプをすばやく簡単に入手

新規ユーザーの場合

Adobe MAX 2024

Adobe MAX
クリエイティブカンファレンス

10 月 14 日~ 16 日 マイアミビーチおよびオンライン

Adobe MAX

クリエイティブカンファレンス

10 月 14 日~ 16 日 マイアミビーチおよびオンライン

Adobe MAX 2024

Adobe MAX
クリエイティブカンファレンス

10 月 14 日~ 16 日 マイアミビーチおよびオンライン

Adobe MAX

クリエイティブカンファレンス

10 月 14 日~ 16 日 マイアミビーチおよびオンライン