コアポイント

• Google Fontsは、美しく一貫したクロスデバイスデザインを作成するためにWebプロジェクトで使用できる多數(shù)のWebフォントを提供する無(wú)料のオープンソースプラットフォームです。
• font-displayプロパティは、Googleフォントを使用するための鍵です。これは、負(fù)荷中のフォントのレンダリング動(dòng)作を制御し、スローフォントの負(fù)荷の影響を減らすことでユーザーエクスペリエンスを最適化します。
• プロジェクトにGoogleフォントを追加する主な方法は2つあります。リンクとインポートです。どちらの方法でも、Google Fonts Webサイトから目的のフォントを選択し、HTMLまたはCSSファイルに提供されたコードを追加することが含まれます。
• font-display屬性には、5つの可能な値（自動(dòng)、ブロック、スワップ、フォールバック、オプション）があり、ロード中にフォントのレンダリング方法を決定し、カスタムユーザーエクスペリエンスを可能にします。

このチュートリアルでは、Googleフォントと

プロパティの使用方法について説明します。 font-display

Google Fontsは、Webフォントの大きなライブラリを提供する無(wú)料のオープンソースプラットフォームです。 Web開(kāi)発者として、これらのフォントをプロジェクトに統(tǒng)合することは、視覚的に魅力的で、さまざまなデバイスで一貫して設(shè)計(jì)されたWebページを作成するために不可欠です。 Googleフォントを効果的に使用することの重要な側(cè)面は、

屬性を理解することです。これにより、ロード中にフォントがどのようにレンダリングされるかが決まります。 font-display

次のトピックについて説明します

Googleフォントとは何ですか？

1. プロパティとは何ですか？
2. font-displayプロジェクトにGoogleフォントを追加する方法
3. リンクGoogle Fonts
   • Googleフォントをインポート
   さまざまな
値を理解
4. font-displayauto
   • block
   • swap
   • フォールバック
   • optional
   Googleフォントを使用した
   >プロパティ
を使用して実裝しています
5. リンクの使用方法font-display
   • メソッド
   を使用します
   • @import FAQのトラブルシューティング
問(wèn)題：カスタムフォントはロードまたは表示できません
6. 問(wèn)題：目に見(jiàn)えないテキストフラッシュ（foit）または非スタイルのテキストフラッシュ（fout）
   問(wèn)題：ブラウザ全體で一貫性のないフォントレンダリング
Googleフォントとは何ですか？

Google Fontsは、Googleが提供する1,000を超える無(wú)料のライセンスフォントファミリのライブラリです。これらのフォントは、ウェブサイトに簡(jiǎn)単に埋め込まれて、ユニークでプロフェッショナルで一貫した外観を作成できます。 Google Fontsはパフォーマンスとアクセシビリティに最適化されているため、Web開(kāi)発に理想的な選択肢となっています。

プロパティとは何ですか？

font-displayプロパティは、読み込み中のフォントのレンダリング動(dòng)作を制御するCSS関數(shù)です。目に見(jiàn)えない文字を持つ代替フォントまたはテキストを表示する前に、ブラウザがフォントがロードするのを待つ時(shí)間を決定します。 屬性を使用することにより、ウェブサイトのデザインとパフォーマンスに対する遅いフォントロードの影響を減らすことにより、ユーザーエクスペリエンスを最適化できます。

プロジェクトにGoogleフォントを追加する方法

プロジェクトにGoogleフォントを追加する主な方法は2つあります。リンクとインポートです。

リンクGoogle Fonts

リンクは、プロジェクトにGoogleフォントを追加する最も一般的な方法です。これを行うには、次の手順に従います

Google Fonts Webサイトを入手してください。
使用するフォントを參照または検索します。
フォントをクリックして詳細(xì)ページを開(kāi)きます。
チェックボックスをクリックするか、スライダーを使用して、必要なフォントスタイルと厚さを選択します。
[このスタイルを選択]ボタンをクリックして、選択したフォントスタイルをコレクションに追加します。
[埋め込み]タブを開(kāi)くと、HTMLファイルのヘッダー部分に追加できるリンクタグが表示されます。
たとえば、「ロボット」フォントを追加するには、リンクタグが次のようになります。

Googleフォントをインポート

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

または、CSSファイルの

ルールを使用してGoogleフォントをインポートできます。これを行うには、次の手順に従います

リンクメソッドの手順1-5に従ってください。 @import

埋め込みタブで、@importタブに切り替えます。

1. 提供されたコードスニペットをコピーして、CSSファイルの上に貼り付けます。
2. たとえば、「ロボット」フォントをインポートするために、
ルールは次のようになります。

さまざまな

@importを理解してください

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

屬性には5つの可能な値があり、それぞれ異なるレンダリング動(dòng)作があります：

font-displayauto

block

font-displayswap

フォールバック
optional
• auto
値は、フォントのレンダリング動(dòng)作をブラウザのデフォルト設(shè)定に殘します。このオプションは、異なるブラウザ間で一貫性のないレンダリングを引き起こす可能性があります：

block

値は、ブラウザが最初にテキストを隠し、フォントがロードされるのを待つことを示します。フォントが短期間ロードされていない場(chǎng)合、ブラウザに代替フォントが表示されます。カスタムフォントがロードされると、ブラウザはテキストを切り替えてカスタムフォントを使用します。この方法では、フォントがロードされるのを待っている間、「目に見(jiàn)えないテキストフラッシュ」（FOIT）を引き起こす可能性があります。 auto

swap

font-display: auto;

値は、カスタムフォントをロードした後、代替フォントを使用してすぐにテキストを表示し、カスタムフォントに切り替えるようにブラウザに指示します。この方法では、「スタイル以外のテキストがちらつき」（FOUT）を引き起こす可能性がありますが、ユーザーが最初からテキストを見(jiàn)ることができることを保証します。

blockフォールバック

値は、

font-display: block;

と

の組み合わせです。ブラウザは最初にテキストを簡(jiǎn)単に隠します（通常は約100ミリ秒）。この時(shí)間內(nèi)にカスタムフォントがロードされている場(chǎng)合、ブラウザに表示されます。それ以外の場(chǎng)合は、代替フォントが表示されます。より長(zhǎng)い期間（通常は約3秒）後、カスタムフォントがまだロードされていない場(chǎng)合、ブラウザはあきらめて代替フォントを使用し続けます：

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

optional

optional値はfallbackに似ていますが、カスタムフォントがロードするのが待ち?xí)r間が短いです。この短い時(shí)間（ブラウザに応じて）カスタムフォントがロードされていない場(chǎng)合、ブラウザはあきらめて代替フォントを使用し続けます。このアプローチは、正確なフォントのレンダリングよりもユーザーエクスペリエンスとパフォーマンスを優(yōu)先します：

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

Googleフォントを使用した

の実裝font-displayプロパティ

Google Fontsを使用すると、@import値をリンクまたはfont-displayURLに直接設(shè)定できます。これを行うには、次のオプションのいずれかに従ってください。

リンクの使用方法

• 上記のリンクセクションの手順1-6に従ってください。
• [埋め込み]タブで、カスタマイズセクションを見(jiàn)つけます。
• 「font-display」ドロップダウンメニューで、希望のfont-display値を選択します。
• リンクタグは、選択されたfont-display値で更新されます。更新されたリンクタグをHTMLファイルのヘッダー部分に追加します。

たとえば、

「roboto」フォントを追加するには、font-display値swap：

font-display: auto;

@importメソッド

を使用します

上記のインポート方法の手順1?3に従って
• 。
• [埋め込み]タブで、カスタマイズセクションを見(jiàn)つけます。
• 「font-display」ドロップダウンメニューで、希望のfont-display値を選択します。
• @importルールは、選択されたfont-display値で更新されます。 CSSファイルに更新された@importルールを追加します。

たとえば、

font-display値で「ロボット」フォントをインポートするにはswap：

font-display: block;

FAQSのトラブルシューティング

以下は、Googleフォントと

プロパティを使用する場(chǎng)合のいくつかの一般的な問(wèn)題と解決策です。

問(wèn)題：カスタムフォントはロードまたは表示できません

• htmlまたはcssファイルにリンクタグまたは@importルールを正しく追加したことを確認(rèn)してください。
• リンクまたは@importコードの誤ったまたは誤ったURLを確認(rèn)します。
• CSSルールで正しいフォントファミリ名と厚さが使用されていることを確認(rèn)します。

問(wèn)題：目に見(jiàn)えないテキストフラッシュ（foit）または非スタイルのテキストフラッシュ（fout）

• あなたのニーズをより良く満たすために、異なるfont-display値を選択します。たとえば、foitに遭遇した場(chǎng)合は、swapまたはfallbackを試してください。 FOUTに遭遇した場(chǎng)合は、blockまたはfallbackの使用を検討してください。
• ページのロード中に、ヘッダーセクションの近くまたはCSSファイルの上部近くにリンクまたは@importコードを配置して、ページロード中にできるだけ早くカスタムフォントをロードしてください。
必要なフォントスタイルと厚さのみを選択して、フォントファイルサイズを最適化します。

問(wèn)題：ブラウザ全體で一貫性のないフォントレンダリング

• 値を使用して、異なるブラウザーで一貫した動(dòng)作を確保するのではなく、特定のfont-display値を設(shè)定します。 auto
さまざまなブラウザでWebサイトをテストして、レンダリングの問(wèn)題を特定し、CSSに必要な調(diào)整を行います。

結(jié)論 この記事では、視覚的に魅力的で高性能なWebサイトを作成するために、Googleフォントと

プロパティを使用する方法を検討します。さまざまな

値とその意味を理解することにより、フォントレンダリングを最適化してユーザーエクスペリエンスを向上させることができます。さまざまなブラウザやデバイスで実裝をテストして、外観とパフォーマンスの一貫性を確保してください。 font-display font-display Web開(kāi)発者として、Googleフォントと

プロパティをプロジェクトに統(tǒng)合すると、幅広いユーザーのニーズを満たすプロフェッショナルでアクセス可能なデザインを作成できます。

font-display

（以下はFAQであり、元のテキストに従って書き直され、合理化されています）

Googleフォントを最適化してサイトのパフォーマンスを向上させる方法は？ 屬性（値など）を使用するか、HTTPリクエストを削減するためにローカルに管理されたフォントを検討することもできます。

font-displayGoogleフォントを使用することの利點(diǎn)は何ですか？ swapGoogle Fontsは、Googleがホストし、高速で信頼性が高く、デスクトップおよびモバイルプラットフォーム用に最適化された、使いやすい、幅広い無(wú)料のオープンソースフォントを提供しています。

WordPressサイトにGoogleフォントを追加するにはどうすればよいですか？ Googleフォントは、「Swap Google Font Display」や「Fontsプラグイン」などのWordPressプラグインを使用して簡(jiǎn)単に追加およびカスタマイズできます。

CSSでGoogleフォントを使用する方法は？ Google Fonts Webサイトでフォントを選択し、提供されたリンクタグをHTMLファイルの

セクションにコピーし、CSSルールをCSSファイルに追加します。

Googleフォントをオフラインで使用できますか？ フォントファイルはローカルでダウンロードして使用できますが、個(gè)人の目的のみがあります。

Googleフォントのフォントディスプレイを変更するにはどうすればよいですか？ CSSでfont-displayプロパティを使用します。

Googleフォントはすべてのブラウザーと互換性がありますか？ほとんどの最新のブラウザと互換性がありますが、古いブラウザは特定の機(jī)能やフォントをサポートしない場(chǎng)合があります。

私のウェブサイトに最適なGoogleフォントを見(jiàn)つける方法は？ Google Fonts Webサイトは、フィルタリング機(jī)能を提供し、カテゴリ、言語(yǔ)、その他の屬性ごとにフィルタリングフォントを提供し、プレビューできます。

私のウェブサイトで複數(shù)のGoogleフォントを使用できますか？ はい、しかし各フォントは読み込み時(shí)間を増やし、數(shù)を制限することをお?jiǎng)幛幛筏蓼埂?

あなたのウェブサイトでGoogleフォントを更新する方法は？ Google FontsはGoogleによってホストされており、自動(dòng)的に更新されます。ローカルでホストされている場(chǎng)合は、手動(dòng)で更新する必要があります。

以上がGoogleフォントとフォントディスプレイの使用方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。