網頁字型的效能學:中文字型的特殊挑戰

設計師選了一款漂亮的中文字型,網站上線後卻被抱怨「字要等好幾秒才出現」或「打開瞬間字體跳動」。這不是設計師的錯,是中文網頁的先天課題:英文字型幾十 KB 就裝得下 26 個字母,中文字型要涵蓋常用字就是上萬個字,檔案動輒 3MB 到 10MB——相當於逼每個訪客先下載幾張高解析度照片,才能開始讀你的內容。

我們做的網站以台灣市場為主,中文字型效能是每個專案都要面對的取捨。這篇把子集化、分割載入、系統字型三條路講清楚,幫你在「品牌感」與「速度」之間找到自己的位置。

為什麼中文字型特別重

一套完整的繁體中文字型,要涵蓋教育部常用字、次常用字,加上標點與符號,字符數輕鬆破萬。每個字都是一組向量輪廓資料,加總起來就是數 MB 起跳。更麻煩的是載入期間的體驗:瀏覽器要嘛先隱藏文字等字型到位(白屏),要嘛先用備用字型顯示、載完再切換(字體跳動)。前者讓人以為網站壞了,後者造成版面位移,兩者都直接傷害效能指標與閱讀體驗——這也是 Core Web Vitals 裡 LCP 與 CLS 常見的兇手。

解法一:子集化——只帶會用到的字

子集化(subsetting)就是把字型檔裡用不到的字刪掉,只保留網站實際會出現的字。分兩種做法:

靜態子集:適合內容固定的場景,例如只有標題用特殊字型。把全站標題用到的幾百個字抽出來做成小字型檔,常常能從 5MB 壓到 100KB 以內,效果立竿見影。
動態子集:內容會一直長大的網站(部落格、電商)沒辦法預知會用到哪些字。Google Fonts 的思源黑體等中文字型採用「切片」策略——把字型依使用頻率切成上百個小檔案,瀏覽器只下載頁面實際需要的切片。付費服務如 justfont 也提供類似的動態子集技術。

實務建議:品牌字型只用在標題與關鍵視覺,內文交給系統字型。標題字數有限,靜態子集就能處理;內文用系統字型零下載成本。這是我們最常採用的折衷,品牌感保住了,速度也保住了。

字型是品牌的聲音,但訪客要先等得到,才聽得到。5MB 的美,不如 100KB 的剛剛好。

解法二:誠實評估系統字型

系統字型就是裝置內建的字體:Apple 裝置的蘋方、Windows 的微軟正黑體、Android 的思源黑體。用系統字型意味著零下載、零白屏、零跳動,而且這些字型本身的品質都相當好。代價是不同裝置上長相略有差異,以及「跟大家長得一樣」。

我們的誠實建議:對絕大多數企業官網與電商,內文用系統字型是完全合理的選擇,訪客根本不會察覺,速度收益卻是實打實的。真正需要自載內文字型的,通常是對排印有強烈堅持的出版、設計類品牌——而他們也該為此付出子集化的工程成本,而不是直接丟一個完整字型檔上線。

解法三:載入策略把傷害降到最低

不管用哪種字型方案,這幾個技術細節都該做:

格式用 WOFF2:目前壓縮率最好的網頁字型格式,比舊格式小三成以上。
設定 font-display: swap:先用備用字型顯示內容,字型載完再換,確保訪客永遠讀得到字。搭配挑選字寬相近的備用字型,可以把切換時的版面跳動降到最低。
預先載入關鍵字型:用 preload 提示瀏覽器優先抓首屏標題用的字型檔,縮短切換的空窗。
自己託管並設定長快取:字型檔幾乎不變,適合設一年快取,回訪者完全零成本。

一個可以直接抄的決策順序

預算與工期有限時,照這個順序決定:內文先用系統字型;品牌標題字型做靜態子集、WOFF2、preload;若未來內容量大到標題也無法預知用字,再升級動態子集服務。這套組合能讓中文網站在保有個性的同時,把字型成本控制在幾百 KB 內。

字型效能是台灣網站最容易被忽略、卻最容易見效的優化點。我們的品牌官網設計開發服務在設計階段就會把字型策略跟視覺一起定案,不讓「上線才發現首頁 8MB」的事發生。