自訂字體閃爍與阻塞：font-display 設定盤點流程

作者：平白設計編輯部｜發布與最後查證：2026-09-29｜適用：台灣（中華民國）｜技術資訊，不保證搜尋排名

十月連假前品牌網站常更新視覺，引入新字型卻忽略載入行為。若未設定 font-display，文字渲染會被阻擋直到檔案下載完成，直接影響首次內容繪製與閱讀體驗。本文盤點排查流程，確認 swap 或 fallback 策略是否到位。這屬於技術檢查，不保證 Core Web Vitals 分數或排名變化。

文章重點

• font-display 屬性決定文字在字型下載期間的顯示策略
• 預設 auto 或 block 可能導致長時間無文字顯示
• Chrome DevTools Network 面板可快速篩選字型請求時間
• 統一設定 swap 能優先顯示系統字型再替換為自訂字型

連假改版為何容易忽略字型載入

十月連假前許多品牌會集中更新網站視覺，引入全新自訂字型提升辨識度。然而設計師交付檔案後，前端往往直接貼上 @font-face 規則，忘記檢查瀏覽器預設的載入行為。這個疏漏會讓訪客在等待字型下載時看到一片空白。

字型檔案體積通常不小，尤其在行動網路環境下，下載時間可能長達數秒。若沒有明確指定 font-display 策略，瀏覽器會依預設值處理，多數情況等同於 block，導致文字渲染被完全阻擋，直到資源準備就緒才一次顯示。

這類問題在改版驗收時容易被忽略，因為內部測試多使用高速網路，感受不到延遲。建議把字型載入檢查列入上線前的標準流程，就像 改版後 favicon 路徑怎麼抽樣 一樣，成為固定項目。

font-display 如何影響 FCP 與可見度

font-display 是 CSS @font-face 規則中的描述符，用來告訴瀏覽器在字型尚未載入完成時該如何處理文字顯示。常見值包含 auto、block、swap、fallback 與 optional，每種策略對應不同的等待時間與替換邏輯。

對首次內容繪製而言，swap 是最常被推薦的設定。它讓瀏覽器先以系統字型渲染文字，等自訂字型下載完畢後再進行替換。這樣做能確保內容立即可讀，避免畫面長時間留白，維持穩定的閱讀體驗。

若採用 block，瀏覽器會給予較長的封鎖期，期間文字不可見。雖然最終能呈現完整設計，但對效能指標與使用者感受都有負面影響。選擇策略時需在視覺一致性與內容可讀性之間取得平衡。

@font-face {
  font-family: 'BrandFont';
  src: url('/fonts/brand.woff2') format('woff2'),
       url('/fonts/brand.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

用 Chrome DevTools 排查字型請求

打開 Chrome DevTools 切換到 Network 面板，點擊 Font 篩選器，重新整理頁面即可看到所有字型請求。重點觀察每個檔案的載入時間與狀態碼，確認是否有過長等待或失敗的請求需要處理。

接著切到 Sources 或 Elements 面板搜尋 @font-face，逐一檢查每個規則是否包含 font-display 宣告。若發現缺失或使用 block，就是需要修正的目標。這個步驟應在每次引入新字型時執行。

排查時也順便留意字型來源網域是否與主站不同。跨域請求會額外增加連線建立時間，可能需要搭配預先連線標籤來縮短延遲。如同 改版後 og:locale 怎麼抽樣，細節都需要逐一核對。

統一設定 swap 與 WOFF2 格式優勢

實務上建議全站字型統一採用 font-display: swap，除非有特殊需求必須等待自訂字型載入才能顯示內容。統一的策略能降低維護成本，也避免不同頁面出現不一致的文字閃爍行為。

除了顯示策略，檔案格式同樣關鍵。WOFF2 相比舊版 WOFF 或 TTF 能大幅壓縮體積，通常可減少三成以上的傳輸量。更小的檔案意味著更快的下載速度，間接縮短字型替換前的等待時間。

轉換格式的工具很多，多數靜態資源服務也支援直接上傳 WOFF2。記得在 @font-face 中將 WOFF2 放在 src 列表最前面，讓支援的瀏覽器優先選用最輕量的版本，不支援者再往下尋找備選。

預先連線字型來源網域的寫法

若字型檔案存放在外部 CDN 或獨立子網域，瀏覽器需要先完成 DNS 查詢、TCP 握手與 TLS 交握才能開始下載。這些前置作業會消耗寶貴時間，尤其在使用者首次造訪時更為明顯。

可以在 HTML head 中加入 link rel=”preconnect” 標籤，指向字型來源網域。這會提示瀏覽器提前建立連線，當 CSS 解析到 @font-face 時就能直接開始下載，省去重複的連線建立過程。

同時可搭配 link rel=”preload” 針對關鍵字型進行預載，但需注意不要過度使用，以免排擠其他重要資源。就像檢查 改版後 web manifest 怎麼抽樣 一樣，資源優先順序需通盤考量。

常見問題

font-display: swap 會造成文字閃爍嗎？

會。swap 策略先顯示系統字型再替換為自訂字型，替換瞬間可能產生版面微調或字體變化，稱為 FOIT 或 FOUT。這是為了優先確保內容可讀所做的取捨。

為什麼推薦 WOFF2 而非其他格式？

WOFF2 使用更先進的壓縮演算法，檔案體積通常比 WOFF 小三到四成。體積越小下載越快，能有效縮短字型替換前的等待時間。

preconnect 可以加很多個嗎？

不建議。瀏覽器對同時建立的連線數量有限制，過多 preconnect 反而會互相排擠。只針對確定會用到的關鍵第三方網域加入即可。

設定 swap 就能改善 Core Web Vitals 嗎？

swap 有助於縮短首次內容繪製的時間，但 Core Web Vitals 包含多項指標，受整體架構影響。此設定屬技術優化，不保證分數或排名變化。

重點摘要

1. font-display 控制字型下載期間的文字顯示策略
2. swap 能優先渲染內容避免長時間畫面空白
3. DevTools Network 面板可快速定位字型載入瓶頸
4. WOFF2 與 preconnect 搭配使用能進一步縮短延遲

延伸閱讀

• 改版後 favicon 路徑怎麼抽樣
• 改版後 og:locale 怎麼抽樣
• 改版後 web manifest 怎麼抽樣