Googleフォントとフォントディスプレイの使用方法

コアポイント

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

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

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

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

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

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

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

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

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

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

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

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

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

リンクGoogle Fonts

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

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

Googleフォントをインポート

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

または、CSSファイルの

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

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

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

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

さまざまな

@importを理解してください

<code class="language-css">@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');</code>

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

font-displayauto

block

font-displayswap

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

block

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

swap

<code class="language-css">font-display: auto;</code>

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

blockフォールバック

値は、

<code class="language-css">font-display: block;</code>

と

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

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

optional

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

<code class="language-css">@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');</code>

Googleフォントを使用した

の実装font-displayプロパティ

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

リンクの使用方法

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

たとえば、

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

<code class="language-css">font-display: auto;</code>

@importメソッド

を使用します

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

たとえば、

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

<code class="language-css">font-display: block;</code>

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

以下は、Googleフォントと

プロパティを使用する場合のいくつかの一般的な問題と解決策です。

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

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

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

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

問題：ブラウザ全体で一貫性のないフォントレンダリング

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

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

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

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

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

font-display

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

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

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

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

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

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

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

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

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

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

私のウェブサイトで複数のGoogleフォントを使用できますか？ はい、しかし各フォントは読み込み時間を増やし、数を制限することをお勧めします。

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

以上がGoogleフォントとフォントディスプレイの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。