如何修復「確保文字在 Webfont 載入期間保持可見」警告？-js教程-PHP中文網

How to Fix “Ensure Text Remains Visible During Webfont Loading

建立一個視覺吸引力且使用者友善的 WordPress 網站需要取得平衡。雖然個人化網站的外觀和感覺很重要，但確保流暢的使用者體驗才是第一位的。

「確保文字在 Webfont 載入期間保持可見」警告是優化 WordPress 網站效能時的常見挑戰。此警告出現在網站效能分析工具（例如 Google PageSpeed Insights）中，可能會讓您想知道它的含義以及如何修復它。

本文將幫助您了解此警告、其對您網站的影響，以及最重要的是如何有效處理它。我們將探索在 WordPress 主題中手動實施的解決方案，以及使用方便的插件，讓您的文字對訪客來說清晰明了。

了解字體：系統字體與 Web 字體

在我們深入探討「確保文字在 Webfont 載入期間保持可見」警告之前，讓我們快速瀏覽一下您在 Web 開發中可能遇到的不同類型的字體，特別是針對您的 WordPress 網站。

系統字體

想像一下打開一個網站並立即看到文字顯示。您看到的這些字體很可能是系統字體。這些是大多數裝置上預先安裝的字體，例如 Arial、Times New Roman 或 Helvetica。由於瀏覽器很容易識別它們，因此文字會立即出現。

網頁字體

但是，系統字體有時會讓人感覺很通用。這就是網頁字體的用武之地。網頁字體是自訂字體，您可以將其新增至 WordPress 網站以建立獨特的視覺標誌。它們提供了更廣泛的樣式，可以提升您網站的整體設計。

網路字體的挑戰

雖然網頁字體具有不可否認的優點，但它們也有一個小缺點：載入時間。與系統字體不同，網頁字體需要從伺服器下載才能顯示在您的網站上。此下載可能會導致短暫的延遲，可能會導致「確保文字在 Webfont 載入期間保持可見」警告。

什麼是「確保文字在 Webfont 載入期間保持可見」？

現在我們了解了系統字體和網頁字體之間的區別，讓我們解決「確保文字在網頁字體載入期間保持可見」警告。當您的網站使用網頁字體時，此訊息會在 Google PageSpeed Insights 等網頁開發工具中彈出。但這到底是什麼意思呢？

想像一下您正在造訪一個使用獨特網頁字體的網站。當網頁字體仍在下載時，瀏覽器可能最初會嘗試使用系統字體顯示文字。這可能會導致在下載的網頁字體接管之前，文字會出現短暫的不可見狀態。這種現象稱為「隱形文字閃現」(FOIT)。

「確保文字在 Webfont 載入期間保持可見」警告強調了這個潛在問題。它實質上建議您採取措施，確保即使在加載網頁字體時，網站上的文字仍然可見。這有助於防止在字體加載時內容似乎在跳躍的不和諧的用戶體驗。

為什麼會出現這個警告？

「確保文字在 Webfont 載入期間保持可見」警告出現在網站效能分析工具中是有原因的。讓我們探討為什麼網頁字體會影響您網站的效能並觸發此警告。

下載時間

網頁字型是外部文件，需要由使用者的瀏覽器下載才能顯示。與現成的系統字體相比，此下載為該過程添加了額外的步驟。雖然單一字體的延遲可能很小，但網站通常對標題、正文和其他元素使用多種網頁字體。累積下載時間可能會減慢網站的初始載入速度，可能導致負面的使用者體驗。

FOIT 和使用者體驗

由於潛在的 FOIT（不可見文字閃爍），經常會出現「確保文字在 Webfont 載入期間保持可見」警告。當 Web 字體需要一段時間才能下載時，瀏覽器最初可能會使用系統顯示文字這可能會導致短暫的閃爍，在下載的網頁字體出現之前，文字就會消失。這種「閃爍」可能會讓使用者感到不舒服並擾亂閱讀流程。

表現

Google PageSpeed Insights 等網站效能分析工具優先考慮流暢的使用者體驗。「確保文字在 Web 字體載入期間保持可見」警告作為一個標誌，表明您的網站可能會因 Web 字體載入而遇到效能問題。透過解決此警告，您可以優化網站的載入速度並確保為訪客提供無縫體驗。

WordPress 手動解決方案

現在我們已經解開了「確保文字在 Webfont 載入期間保持可見」警告及其與 Web 字體使用的聯繫，讓我們深入研究解決方案！本節將探討如何在您的 WordPress 網站中手動修復此問題。

解決此警告的關鍵在於實作名為 font-display: swap 的 CSS 宣告。但在我們深入研究程式碼之前，讓我們先了解一下它是如何運作的。

font-display：交換及其對 Webfonts 的影響

修正「確保文字在 Webfont 載入期間保持可見」警告的靈丹妙藥在於名為 font-display: swap 的 CSS 屬性。讓我們詳細分析這段程式碼的作用以及它如何影響 Web 字體在 WordPress 網站上的載入方式。

字體顯示：

想像一下您的網站使用自訂網頁字體。通常，在下載網頁字體時，瀏覽器可能會顯示空白或系統字體。這就是創造 FOIT（隱形文字閃光）潛力的原因。

透過在 Web 字型的 CSS 程式碼中包含 font-display: swap 屬性，您可以指示瀏覽器以不同的方式處理載入。關鍵是：

瀏覽器最初將使用後備字體顯示文本，該字體通常是系統字體。
顯示後備字體時，網頁字體會在背景下載。
下載網頁字型後，瀏覽器將順利地將後備字型替換為下載的網頁字型。

這種交換發生得很快，最大限度地減少了用戶看到空白或刺耳閃爍的機會。結果呢？文字在整個載入過程中保持可見，確保流暢的使用者體驗。

重要提示：請務必記住，與其他方法相比，使用 font-display: swap 可能會導致顯示網頁字體時出現輕微延遲。然而，這種延遲通常很小，並且常常被避免 FOIT 的好處所抵消。

FOIT 與 FOUT

當我們深入研究 Web 字體載入策略時，您可能會遇到 WordPress Web 開發中經常使用的兩個術語：FOIT 和 FOUT。讓我們分解這些首字母縮略詞並了解它們與「確保文字在 Webfont 加載期間保持可見」警告之間的關係。

FOIT (Flash Of Invisible Text)：這描述了下載網頁字型時瀏覽器原本不顯示文字或空白的情況。這正是 font-display: swap 屬性所要解決的問題。
FOUT（Flash Of Unstyled Text）：當瀏覽器在網頁字體仍在下載時使用後備字體（通常是系統字體）顯示文字時，就會發生這種情況。然而，與 FOIT 不同的是，文字仍然可見，但它以後備字體的樣式顯示，而不是預期的網頁字體。

FOIT 和 FOUT 都會導致佈局變更或文字暫時顯示無樣式，從而破壞使用者體驗。 font-display: swap 屬性有助於最大限度地減少 FOIT 和 FOUT 的可能性，確保更平滑地過渡到所需的 Web 字體。

在 WordPress 中實作 CSS 修復

現在我們已經探索了字體顯示的強大功能：交換及其在應對「確保文字在 Webfont 載入期間保持可見」警告中的作用，讓我們開始討論正題吧！本部分將指導您在 WordPress 網站中實施此 CSS 修復。

有兩種主要方法要考慮：

1. 編輯主題的樣式表（針對開發人員）：

此方法涉及直接修改定義網頁字體的 CSS 程式碼。然而，需要注意的是，這種方法需要對 CSS 和主題編輯有一定的了解。以下是一般準則：

在您的主題或子主題中找到定義您正在使用的網頁字體的 CSS 檔案。
尋找指定字型系列和網頁字型來源的部分。
在此部分中，加入以下程式碼行：font-display: swap;

範例：

CSS
@font-face {
  font-family: 'MyCustomFont';
  src: url('path/to/yourfont.woff2') format('woff2');
  font-display: swap; /* This is the new line you'll add */
}

登入後複製

新增 font-display: swap 屬性後，將變更儲存到樣式表中。

2.使用兒童主題（建議）：

如果您不習慣編輯主題的核心文件，建立子主題是一種更安全的方法。這允許您在不修改主主題檔案的情況下實現 CSS 修復。以下是一些資源，可引導您為 WordPress 網站建立子主題 [在 WordPress codex.wordpress.org 上搜尋 wordpress 子主題]。

建立子主題後，請依照下列步驟操作：

在子主題目錄中建立一個新的 CSS 檔案。
包含前面提到的相同程式碼片段，為您的網頁字體指定 font-display: swap 屬性。
在子主題的functions.php 檔案中，使用wp_enqueue_style 函數將自訂CSS 檔案排入佇列。

記住：實施修復後，使用 Google PageSpeed Insights 等工具再次測試您的網站以確保警告消失是至關重要的。

使用插件修復警告

對於那些喜歡更用戶友好的方法的人，有幾個 WordPress 外掛可以幫助您解決「確保文字在 Webfont 加載期間保持可見」警告。這些外掛提供了一種便捷的方式來實現字體顯示優化，而無需直接編輯任何程式碼。

以下是您對外掛程式解決方案的期望：

輕鬆整合：大多數外掛程式都提供使用者友善的介面來配置字體顯示設定。您通常可以選擇所需的行為，例如交換或其他選項，而無需編寫程式碼。
自動最佳化：某些外掛程式可以自動偵測您網站上使用的網頁字體並套用必要的字體顯示設定。這節省了您手動識別和修改字體的時間和精力。
附加功能：某些外掛程式可能會提供字體顯示最佳化以外的附加功能。這些功能可能包括管理網頁字體預先載入、最佳化字體大小或與流行的網頁字體服務整合等功能。

選擇正確的插件：

有多種可用的插件，選擇一個適合您需求的插件非常重要。考慮外掛程式的功能、用戶評論以及與您的 WordPress 版本和主題的兼容性等因素。字體顯示優化的一些流行選項包括：

交換 Google 字型顯示
WP 火箭
效能很重要

重要提示：雖然插件提供了方便的解決方案，但理解諸如 font-display: swap 之類的基本概念始終是一個很好的做法。這些知識可以幫助您在使用外掛程式時做出明智的決定並解決任何潛在問題。

優化後測試

一旦您修復了「確保文字在 Webfont 載入期間保持可見」警告，驗證您的成功至關重要！以下是如何測試您的網站並確保優化按預期進行。

重新運行效能測試：

最初標記警告的工具現在可用於確認修復。再次透過 Google PageSpeed Insights 等工具運行您的網站。尋找報告中已消失的特定警告。

手動測試：

除了只依賴自動化工具之外，執行一些手動測試也很有好處。在不同的瀏覽器和裝置上造訪您的網站。觀察頁面載入時文字的顯示方式。理想情況下，文字應該在整個加載過程中可見，沒有任何不可見或無樣式文字的閃爍。

如有必要，請重複：

如果實施修復後警告仍然存在，請不要灰心。可能還有其他因素在起作用。根據您選擇的方法（手動或外掛程式），您可能需要：

仔細檢查您的 CSS 程式碼：如果您手動實作了 font-display: swap 屬性，請確保程式碼中沒有拼字錯誤或錯誤。
查看插件設定：使用插件，驗證是否為您的網頁字體正確配置了字體顯示設定。
考慮替代解決方案：如果手動或外掛解決方案都不起作用，請探索其他技術，例如預先載入網頁字體或使用字體子集。

注意：網站最佳化是一個持續的過程。透過測試和改進您的方法，您可以確保您的 WordPress 網站為訪客提供流暢且具有視覺吸引力的體驗。

WordPress 中 Webfont 可見度的專業提示

解決了「確保文字在 Webfont 載入期間保持可見」警告後，這裡有一些其他提示，可確保 WordPress 網站上的最佳 Webfont 可見度和無縫用戶體驗：

1.明智地選擇字體：

選擇輕量字體：檔案大小較小的字體下載速度會更快，從而最大限度地減少 FOIT（隱形文字閃爍）的可能性。
考慮使用字體系列：字體系列在單一文件中提供多種樣式（常規、粗體、斜體）。這減少了需要下載的單獨字體檔案的數量。

2.優先考慮字體顯示策略：

嘗試字體顯示值：雖然交換是常見的解決方案，但請根據您的特定需求探索其他選項，例如可選或後備。您可以使用 Google PageSpeed Insights 等工具測試不同的設置，看看哪種設置最適合您的網站。
考慮字體預先載入：預先載入網頁字體會指示瀏覽器提前下載它們，這可能會減少它們出現在螢幕上所需的時間。