如何使用Google字體和字體顯示

核心要點

• Google Fonts是一個免費的開源平台，提供海量網頁字體，可用於網頁項目，打造美觀一致的跨設備設計。
• font-display 屬性是使用 Google Fonts 的關鍵，它控製字體在加載過程中的渲染行為，通過減少緩慢字體加載的影響來優化用戶體驗。
• 向項目添加 Google Fonts 主要有兩種方法：鏈接和導入。這兩種方法都涉及從 Google Fonts 網站選擇所需的字體並將提供的代碼添加到 HTML 或 CSS 文件中。
• font-display 屬性有五個可能的值（auto、block、swap、fallback、optional），它們決定了字體在加載過程中的渲染方式，從而允許自定義用戶體驗。

本教程將探討如何使用 Google Fonts 和 font-display 屬性。

Google Fonts 是一個免費的開源平台，提供大量的網頁字體庫。作為網頁開發者，將這些字體整合到您的項目中對於創建在各種設備上都具有視覺吸引力和一致性設計的網頁至關重要。有效使用 Google Fonts 的一個關鍵方面是理解 font-display 屬性，它決定了字體在加載過程中的渲染方式。

我們將涵蓋以下主題：

1. 什麼是 Google Fonts？
2. 什麼是 font-display 屬性？
3. 如何將 Google Fonts 添加到您的項目中
   • 鏈接 Google Fonts
   • 導入 Google Fonts
4. 理解各種 font-display 值
   • auto
   • block
   • swap
   • fallback
   • optional
5. 使用 Google Fonts 實現 font-display 屬性
   • 使用鏈接方法
   • 使用 @import 方法
6. 常見問題的故障排除
   • 問題：自定義字體無法加載或顯示
   • 問題：不可見文本閃爍 (FOIT) 或非樣式文本閃爍 (FOUT)
   • 問題：跨瀏覽器字體渲染不一致

什麼是 Google Fonts？

Google Fonts 是一個包含超過 1000 個免費授權字體家族的庫，由 Google 提供。這些字體可以輕鬆嵌入到您的網站中，以創建獨特、專業且一致的外觀。 Google Fonts 針對性能和可訪問性進行了優化，使其成為網頁開發的理想選擇。

什麼是 font-display 屬性？

font-display 屬性是一個 CSS 功能，它控製字體在加載過程中的渲染行為。它決定了瀏覽器在顯示備用字體或帶有不可見字符的文本之前應等待字體加載多長時間。通過使用 font-display 屬性，您可以通過減少緩慢字體加載對網站設計和性能的影響來優化用戶體驗。

如何將 Google Fonts 添加到您的項目中

將 Google Fonts 添加到您的項目中有兩種主要方法：鏈接和導入。

鏈接 Google Fonts

鏈接是將 Google Fonts 添加到您的項目中最常用的方法。為此，請按照以下步驟操作：

1. 訪問 Google Fonts 網站。
2. 瀏覽或搜索您要使用的字體。
3. 單擊字體以打開其詳細信息頁面。
4. 通過單擊複選框或使用滑塊來選擇您需要的字體樣式和粗細。
5. 單擊“選擇此樣式”按鈕將所選字體樣式添加到您的收藏中。
6. 打開“嵌入”選項卡，您將看到一個鏈接標籤，您可以將其添加到 HTML 文件的頭部部分。

例如，要添加“Roboto”字體，鏈接標籤將如下所示：

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

導入 Google Fonts

或者，您可以使用 CSS 文件中的 @import 規則導入 Google Fonts。為此，請按照以下步驟操作：

1. 按照鏈接方法中的步驟 1-5 操作。
2. 在“嵌入”選項卡中，切換到“@import”選項卡。
3. 複製提供的代碼片段並將其粘貼到 CSS 文件的頂部。

例如，要導入“Roboto”字體，@import 規則將如下所示：

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

理解各種 font-display 值

font-display 屬性有五個可能的值，每個值都有不同的渲染行為：

• auto
• block
• swap
• fallback
• optional

auto

auto 值將字體渲染行為留給瀏覽器的默認設置。此選項可能導致不同瀏覽器之間的渲染不一致：

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

block

block 值指示瀏覽器最初隱藏文本並等待字體加載。如果字體在短時間內未加載，瀏覽器將顯示備用字體。自定義字體加載完成後，瀏覽器將切換文本以使用自定義字體。此方法可能會導致在等待字體加載時出現“不可見文本閃爍”（FOIT）：

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

swap

swap 值告訴瀏覽器立即使用備用字體顯示文本，並在加載自定義字體後切換到自定義字體。此方法可能會導致“非樣式文本閃爍”（FOUT），但確保用戶從一開始就能看到文本：

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

fallback

fallback 值是 block 和 swap 的組合。瀏覽器最初會短暫隱藏文本（通常約 100 毫秒）。如果自定義字體在此時間內加載，瀏覽器將顯示它。否則，它將顯示備用字體。較長時間後（通常約三秒），如果自定義字體仍未加載，瀏覽器將放棄並繼續使用備用字體：

<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 Fonts 實現 font-display 屬性

Google Fonts 允許您直接在鏈接或 @import URL 中設置 font-display 值。為此，請按照以下選項之一操作。

使用鏈接方法

• 按照上面鏈接部分的步驟 1-6 操作。
• 在“嵌入”選項卡中，找到“自定義”部分。
• 在“font-display”下拉菜單中，選擇所需的 font-display 值。
• 鏈接標籤將使用所選 font-display 值進行更新。將更新後的鏈接標籤添加到 HTML 文件的頭部部分。

例如，要添加具有 font-display 值為 swap 的“Roboto”字體：

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

使用 @import 方法

• 按照上面導入方法的步驟 1-3 操作。
• 在“嵌入”選項卡中，找到“自定義”部分。
• 在“font-display”下拉菜單中，選擇所需的 font-display 值。
• @import 規則將使用所選 font-display 值進行更新。將更新後的 @import 規則添加到您的 CSS 文件中。

例如，要導入具有 font-display 值為 swap 的“Roboto”字體：

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

常見問題的故障排除

以下是使用 Google Fonts 和 font-display 屬性時的一些常見問題和解決方案。

問題：自定義字體無法加載或顯示

• 確保您已將鏈接標籤或 @import 規則正確添加到 HTML 或 CSS 文件中。
• 檢查鏈接或 @import 代碼中的拼寫錯誤或不正確的 URL。
• 驗證 CSS 規則中是否使用了正確的字體系列名稱和粗細。

問題：不可見文本閃爍 (FOIT) 或非樣式文本閃爍 (FOUT)

• 選擇不同的 font-display 值以更好地滿足您的需求。例如，如果您遇到 FOIT，請嘗試使用 swap 或 fallback。如果您遇到 FOUT，請考慮使用 block 或 fallback。
• 通過將鏈接或 @import 代碼放在頭部部分或 CSS 文件的頂部附近，確保您的自定義字體在頁面的加載過程中儘早加載。
• 通過僅選擇必要的字體樣式和粗細來優化字體文件大小。

問題：跨瀏覽器字體渲染不一致

• 設置特定的 font-display 值而不是使用 auto 值，以確保在不同瀏覽器中的一致行為。
• 在各種瀏覽器上測試您的網站，以識別任何渲染問題並對您的 CSS 進行必要的調整。

結論

在本文中，我們探討瞭如何使用 Google Fonts 和 font-display 屬性來創建具有視覺吸引力和高性能的網站。通過了解不同的 font-display 值及其含義，您可以優化字體渲染以改善用戶體驗。請務必在各種瀏覽器和設備上測試您的實現，以確保外觀和性能的一致性。

作為網頁開發者，將 Google Fonts 和 font-display 屬性整合到您的項目中將使您能夠創建專業且易於訪問的設計，以滿足廣泛用戶的需求。

(以下為FAQ，已根據原文進行改寫和精簡)

關於使用 Google Fonts 的常見問題

• 如何優化 Google Fonts 以提高網站性能？ 可以使用 font-display 屬性（例如 swap 值），或考慮本地託管字體以減少 HTTP 請求。

• 使用 Google Fonts 的好處是什麼？ Google Fonts 提供各種免費、開源字體，易於使用，由 Google 託管，速度快且可靠，並針對桌面和移動平台進行了優化。

• 如何在 WordPress 網站中添加 Google Fonts？ 可以使用 WordPress 插件（如“Swap Google Font Display”或“Fonts Plugin”）輕鬆添加和自定義 Google Fonts。

• 如何在 CSS 中使用 Google Fonts？ 在 Google Fonts 網站選擇字體，複製提供的鏈接標籤到 HTML 文件的 部分，然後將 CSS 規則添加到您的 CSS 文件中。

• 可以離線使用 Google Fonts 嗎？ 可以下載字體文件並在本地使用，但僅限個人用途，網站使用需遵守授權條款。

• 如何更改 Google Fonts 中的字體顯示？ 使用 CSS 中的 font-display 屬性。

• Google Fonts 是否與所有瀏覽器兼容？ 與大多數現代瀏覽器兼容，但舊版瀏覽器可能不支持某些功能或字體。

• 如何為我的網站找到最佳 Google 字體？ Google Fonts 網站提供篩選功能，按類別、語言等屬性篩選字體，並可預覽。

• 可以在我的網站上使用多個 Google Fonts 嗎？ 可以，但每個字體都會增加加載時間，建議限制數量。

• 如何更新網站上的 Google Fonts？ Google Fonts 由 Google 託管，會自動更新。如果本地託管，則需要手動更新。

以上是如何使用Google字體和字體顯示的詳細內容。更多資訊請關注PHP中文網其他相關文章！