網頁字型這樣選：中文字型的效能陷阱與解法

英文網站換個 Google Fonts 是幾十 KB 的事，中文網站卻完全是另一個世界——一套中文字型動輒包含上萬個字，完整字檔 5MB 起跳。直接掛上去，網站開啟速度立刻慢一大截。這篇整理我們處理中文 Webfont 的實務做法。

為什麼中文字型特別肥

英文字型只需要收錄幾百個字符，中文字型光常用字就有 4,808 個（教育部常用國字標準字體表），加上次常用字、標點、日文假名相容字符，一套完整的繁中字型檔案輕鬆突破 8MB。這也是為什麼很多網站掛了中文 Webfont 之後，會出現長達數秒的「文字閃爍」或空白。

實務解法有三層

第一層：子集化（Subsetting）。把字型檔裁剪到只剩你網站會用到的字。像 Google Fonts 的思源黑體／宋體採用 unicode-range 切片技術，把整套字型切成一百多個小檔案，瀏覽器只下載頁面實際用到的片段，首次載入通常只需 100-300KB。

第二層：font-display: swap。告訴瀏覽器「字型還沒載好就先用系統字顯示」，避免文字空白期。代價是載入完成瞬間會看到字體切換，但比看不到字好得多。

第三層：分層使用。標題用特色字型、內文用系統字，是 CP 值最高的折衷：

body { font-family: "PingFang TC", "Microsoft JhengHei", sans-serif; }
h1, h2 { font-family: "Noto Serif TC", serif; } /* 只有標題載入 Webfont */

內文使用系統字型零下載成本，而 iOS 的蘋方、Android 的思源黑體本身品質就很好。

我們的建議

形象網站的品牌感主要來自標題與排版，不是內文字型。標題 Webfont ＋ 內文系統字的組合，能在效能與質感之間取得最佳平衡。如果整站都想用特色字型，務必確認有做子集化，並用開發者工具的 Network 面板實測字型下載總量——超過 500KB 就該回頭檢討了。