繁中字型是一筆帳
挑中文字型過去停在「哪套好看」。2026 年可商用的繁中開源字型變多,台北黑體、jf open 粉圓、源樣明體都能直接下載,設計師卻撞上同一道牆:中文字集動輒上萬字,整包丟上網站,首屏先付出幾百 KB。字型決策因此是三本帳同時算:授權、檔案大小、子集化工時。以下把三本帳攤開,讓字型寫得進驗收單。
五個案例
- Google Fonts:靠切片而非壓縮。官方說明日文把最常用前 3,000 字切成 20 片,讓下載位元組比送整包少 80%;韓文再比舊策略少 38%,靠的是 unicode-range、woff2 與 HTTP/2。
- Adobe 思源黑體:七個字重,提供 Super OTC、語言別 OTF、地區子集版與 Variable Font,部分附 WOFF2。選錯包裝,檔案差距是量級的。
- 翰字鑄造 台北黑體:基於思源黑體 KR 版改作,採 OFL 1.1 並明言可自由商用,但官方只給 TTF——轉 WOFF2 與子集化得自己補。
- justfont:jf open 粉圓採 OFL 1.1,收錄約 2,700 餘字,含注音與台客語羅馬字;字少檔案小,代價是冷僻字容易缺。同一家另有商業 web font 服務,分免費與付費層級。
- 源樣明體:ButTaiwan 基於思源宋體改作,OFL 1.1 免費商用,分 TW(台灣現代字形)與 TC(傳統印刷風),選錯調性就跑掉。
背後的邏輯
字型影響品牌感知有兩層。第一層是類別語意:黑體中性、宋體帶編輯權威感、圓體親和但正式度低。第二層更隱形——字形標準:不少繁中字型改作自日韓來源,部分筆形與台灣慣用寫法不同;讀者指不出「這是日本寫法」,微小阻力卻會累積成「有點陌生」。再者,載入策略若讓內文先不可見,閱讀起點就被延後。
技術成本
web.dev 指出拉丁字型多為 100 至 1,000 字符,CJK 可超過 10,000 字,同篇也說 WOFF2 壓縮率比 WOFF 好約 30%,且 Variable Font「通常比只含單一樣式的靜態字型更大」——中文 Variable 要真的用上三個以上字重才划算。
切片有前提:MDN 寫得直白,頁面沒用到該範圍任何字元就不下載,只要用到一個就下載整個檔。切太粗等於沒切。
工時要誠實:把開源 TTF 做成可上線的分片 WOFF2,含盤點、切片、寫 unicode-range 與測試,依我們經驗多落在半天到一天半。字型不是排名直接因子,卻是常見的 LCP 與位移來源。
適合 vs 不適合的網站
| 適合自訂繁中字型 | 建議先用系統字或雲端字 |
|---|---|
| 品牌官網、形象頁 | 媒體、論壇、UGC 平台 |
| 文案固定的活動網站 | 後台、SaaS 介面、報表頁 |
| 精品、餐飲、文創、設計業 | 電商商品頁(字集不可控) |
| 字型已納入設計系統維護 | 無人力維運子集化 |
怎麼套用到你的網站
- 盤點字集:固定文案與動態內容(CMS、商品名、留言)分開,後者不可子集化。
- 先過授權關:確認是 OFL、買斷或訂閱,授權範圍寫進專案文件。
- 標題內文分流:標題用特色字(字少、可精準裁切),內文用 Noto Sans TC 或系統字。
- 轉檔切片:以 fontTools 的 pyftsubset 產生 WOFF2,依字頻分片並寫上 unicode-range。
- 設定載入策略:內文用 font-display: swap,後備字型以 size-adjust 對齊度量以降低位移。
- 量測留證:上線前後各量一次 LCP 與字型下載量,數字寫進驗收單。
- ☐ 授權已存檔,涵蓋網頁嵌入
- ☐ 動態內容有系統字後備,不出現方框
- ☐ 字型檔全為 WOFF2 並已分片
- ☐ 已量測字型 KB 與 LCP 差異
常見錯誤
- 整包 TTF 上傳:沒壓縮也沒裁切,是繁中網站常見的效能地雷。
- 對動態內容硬子集化:一出現冷僻字就掉回系統字或方框。
- 誤解 OFL:可商用改作,但散布須沿用相同授權,也不得把字型單獨當商品賣。
- 盲信 Variable 較小:只用一個字重時,中文 Variable 反而是倒退。
延伸資源
- Google Fonts:Noto Sans TC——免費且切片供應的起點。
- fontTools pyftsubset 文件——自建子集化的官方說明。
- MDN:font-display——五種載入策略定義。
常見問題
開源字型能用在客戶商案嗎?
採 OFL 1.1 的字型可免費商用,台北黑體與 jf open 粉圓官方都明講;但改作散布須沿用相同授權,字型檔也不能單獨販售。
中文網頁字型會拖慢網站嗎?
未處理的整包會。轉成 WOFF2、依字頻分片並設 unicode-range,瀏覽器只抓頁面用到的片段。
標題和內文要用同一套字嗎?
不必,分流更划算:標題字集小可精準裁切,內文交給 Noto Sans TC 或系統字。
中文 Variable Font 值得用嗎?
看字重數量。web.dev 指出 Variable 通常大於單一靜態樣式,用到三個以上字重才划算。
做成可驗收的規格
字型牽動授權風險、首屏效能與維護成本。若你正在做品牌網站改版,或網站已被字型檔拖慢,我們可協助盤點字集、規劃子集化,並把授權與效能指標寫進驗收文件。
- Email:[email protected]
- 電話:0916-224-047
- LINE:@ufv9089p