開場：字選錯，網站不是變醜，是變慢
繁體中文網站的字體選擇，比英文網站棘手得多——因為一套涵蓋常用漢字的 CJK 字型檔案，動輒好幾 MB，比整包英文字型大上百倍。選字這件事在繁中語境裡不只是美感問題，更是效能問題：字沒挑好、沒做子集化，你精心設計的版面會在手機上慢到讓人跳出。這篇談 7 套值得考慮的繁中字體、它們的商用授權，以及 Variable Font 的檔案大小真相。
值得參考的繁中字體案例
- 思源黑體 / Noto Sans TC（Adobe × Google 開源）：字重齊全、開源可商用，是政府與企業官網最常見的安全牌，中性專業。可在 Google Fonts 取得，並有 Variable Font 版本。
- 思源宋體 / Noto Serif TC：宋體襯線，長文閱讀與內容型媒體（雜誌、報導網站）常用，帶書卷與權威感。
- 台北黑體（Taipei Sans TC）：基於開源粉圓改作、免費商用，筆畫圓潤親切，適合親民品牌與教育類。
- jf open 粉圓（Open Huninn）：開源手寫圓體，可愛活潑，常見於文創、餐飲、兒童相關品牌。
- justfont 金萱（商用付費）：介於黑體與宋體之間的優雅內文字，質感取向的品牌官網愛用，需授權費。
設計背後的邏輯
字體不只是外觀，它是品牌語氣的第一個訊號。研究型排版的共識是：字重、字寬與筆畫風格會影響讀者對「專業 vs 親切」「權威 vs 活潑」的第一印象，往往在讀者讀懂文字內容之前就已形成。黑體傳達現代、乾淨、中性；圓體傳達親和、無壓力；宋體傳達傳統、可信、適合長讀。選字的正確問法不是「哪套好看」，而是「我想讓訪客在 0.5 秒內感覺到什麼」。與品牌調性一致的字體，會降低訪客的認知摩擦。
技術成本與限制
這是繁中選字最容易被忽略、卻最傷效能的一環。一套完整的 CJK 字型（涵蓋數萬字符）常見落在 5–16MB 等級；即使是 Variable Font 把多字重收進單一檔案，總量仍然可觀。若直接整包載入，字型會成為 LCP 的殺手。解法是子集化（subset）——只打包頁面真正用到的字符，能把體積從數 MB 壓到數十至數百 KB。實務上請遵循 web.dev 的字型最佳實務：font-display: swap 先用系統字撐版面、preload 關鍵字型、以 WOFF2 格式壓縮。Variable Font 的好處是「一個檔案給多字重」，省去多次請求，但對 CJK 而言仍必須搭配子集化才划算。
適合行業 vs 不適合行業
| 字體風格 | 適合 | 不適合 |
|---|---|---|
| 黑體（思源黑體） | 科技、金融、企業官網、後台系統 | 想強調手感溫度的文創小店 |
| 圓體（台北黑體／粉圓） | 教育、親子、餐飲、文創品牌 | 需要嚴肅權威感的法律、醫療 |
| 宋體（思源宋體） | 內容媒體、長文閱讀、精品敘事 | 大量小字 UI、行動端密集介面 |
怎麼套用到你的網站（5 步驟）
- 步驟 1 定調性：先確定品牌要給人的第一印象（專業／親切／權威），再回頭選字風格。
- 步驟 2 選 1–2 套字：標題與內文最多兩套，避免字體打架；優先選開源可商用者降低授權風險。
- 步驟 3 做子集化：用工具只打包用到的字符，輸出 WOFF2。
- 步驟 4 設定載入策略：
font-display: swap+preload關鍵字型，避免版面跳動與 LCP 惡化。 - 步驟 5 量測：用 Lighthouse／Core Web Vitals 驗證字型沒有拖慢載入。
常見錯誤 × 怎麼避開
- 整包載入未子集化：首屏卡好幾秒。避開：一定要 subset + WOFF2。
- 同頁塞三種以上字體：視覺雜亂、又多次請求。避開：標題＋內文最多兩套。
- 用了付費字沒確認授權：商用被追討。避開：優先開源字，付費字先確認網頁授權範圍。
延伸資源
- Google Fonts — Noto Sans TC：免費取得思源黑體與 Variable Font 版本。
- Fontsource（@fontsource-variable/noto-sans-tc）：自架 Variable Font 的 npm 套件。
- web.dev — Font best practices：字型載入與效能官方指南。
常見問題 FAQ
繁中網站到底該用哪一套字最保險？
若不確定，思源黑體（Noto Sans TC）是最安全的選擇：開源可商用、字重齊全、中性專業，且 Google Fonts 與自架都好取得。等品牌調性明確後，再考慮換上更有個性的字。
Variable Font 是不是就一定比較省？
不一定。Variable Font 的優點是「一個檔案含多字重」，減少請求數；但對 CJK 而言檔案本身仍然很大，必須搭配子集化才真的省。省不省要看你有沒有做 subset，不是有沒有用 variable。
免費字體可以商用嗎？
思源黑體、台北黑體、jf open 粉圓等採開源授權，通常可商用，但仍應閱讀各自授權條款；像金萱這類則需付費授權，網頁使用前務必確認授權範圍。
字型太大拖慢網站，最快的解法是什麼？
最快見效的三招：子集化只留用到的字、轉成 WOFF2、加上 font-display: swap 與 preload。這三項通常能把字型從 LCP 瓶頸變成無感載入。
資料來源
- web.dev：Best practices for fonts（含子集化與載入策略）
- Google Fonts：Noto Sans TC（字重與 Variable Font 資訊）
行動呼籲
想讓網站的字體既符合品牌調性又不拖慢速度？ScriptWalker 提供品牌視覺與網頁效能整合服務，從選字、子集化到 Core Web Vitals 優化一次到位，歡迎免費諮詢。
- Email：[email protected]
- 電話：0916-224-047
- LINE：@ufv9089p