為繁中內容站挑選字體配對

專案目標

你正在做一個以技術文章為主的繁中內容站,設計稿上標題用一支襯線字、正文用無襯線字。問題是:繁中 Web 字體檔案極大,載入慢會把首屏推走,fallback 與品牌字寬度不同又會造成 CLS。本範例用 font-pairer 與 style-generator 走完一次可落地的配對。

1. 先列需求,不要先開 Google Fonts

打開字體網站之前,先把限制寫下來。font-pairer 的決策順序是覆蓋、可讀、品牌,最後才是美感。

語言：繁體中文(必含常用字 + 標點)
內容：長文章,桌面為主,手機佔三成
閱讀尺寸：正文 16px / 標題 28px
數字與程式碼：等寬,表格欄位要對齊
品牌性格：技術感、可信,不要可愛
預算：不自架字型 CDN,只用 Google Fonts 或系統字

「不要可愛」這條要寫出來。它會把所有圓體直接過濾掉,省下你來回試錯。

2. 用 font-pairer 收窄候選

把需求交給 font-pairer,它給出的是字體家族、字重用途和 fallback 規則,而不是開一長串名單。

:root {
  --font-heading: 'Noto Serif TC', 'Songti TC', serif;
  --font-body: 'Inter', 'Noto Sans TC', 'Brand Fallback', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
}

/* 字重只保留實際用到的值 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Noto+Sans+TC:wght@400;700&family=Noto+Serif+TC:wght@600;700&family=JetBrains+Mono:wght@400&display=swap');

重點是字重只抓四個,不是六個。標題 700、副標 600、正文 400、強調 700,這樣就夠了。多載一個字重在繁中環境裡是數百 KB。

3. 處理繁中字符覆蓋

Inter 不含中文字符,所以它負責英文與數字,Noto Sans TC 接手中文。順序很重要:瀏覽器會用 fallback list 中第一個能渲染該字符的字體。

"Hello 世界" 的渲染順序:
H e l l o    → Inter
世 界         → Noto Sans TC

驗證方式是實際渲染一段含罕用字的樣本,例如「𠮷(吉字異體)」或「着/著」,看是否回退到系統字。回退到系統字不一定是錯,但你要知道發生在哪個字符。

4. 用 size-adjust 把 fallback 校正到不跳動

品牌字還沒載入時,瀏覽器先用 fallback。Inter 與 Arial 寬度不同,標題會先寬後窄,推動下方按鈕。

@font-face {
  font-family: 'Brand Fallback';
  src: local('Arial');
  size-adjust: 92%;
  ascent-override: 88%;
  descent-override: 22%;
  line-gap-override: 0%;
}

size-adjust 的數值要拿你的實際標題來量,不是抄固定值。改一個數字,把同一段標題截圖比對,直到品牌字載入前後的高度差小到看不出來。

5. 用 style-generator 落成字體規則

最後把字體決策交給 style-generator,它會把字體放進完整的元件規則,而不是只交出 CSS 變數。

h1 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; }
h2 { font-family: var(--font-heading); font-weight: 600; line-height: 1.25; }
body { font-family: var(--font-body); font-weight: 400; line-height: 1.7; }
code, pre { font-family: var(--font-mono); font-size: 0.9em; }

style-generator 會同時檢查:行距是否過緊造成閱讀疲勞、數字欄位是否用了等寬、程式碼區塊的 font-size 是否需要降一階。這些是字體配對常被漏掉的下游問題。

6. 慢網路驗證

在 DevTools 把網路設成 Slow 4G、停用快取,重新整理。觀察三件事:

首屏文字出現時間(不應等品牌字)。
品牌字替換時,標題與按鈕是否位移。
繁中字符在品牌字載入前是否可讀(不應出現豆腐方塊)。

把這三項的截圖連同字體清單、字重用途、fallback 數值寫進交付文件。

驗收

字重不超過四個,每個都有對應用途。
fallback size-adjust 校正後,CLS < 0.1。
繁中罕用字回退到系統字,視覺差異在可接受範圍。
Slow 4G 下首屏文字在 1 秒內可讀。

關鍵學習點

先列限制再挑字體,font-pairer 的順序是覆蓋、可讀、品牌、美感,美感最後。
繁中配對裡,英文字體負責英文與數字,中文字體接手中文,fallback list 順序決定渲染。
size-adjust 必須用實際標題量校正,抄固定值會在不同字體上失效。
字體決策要交給 style-generator 落成完整規則,行距、等寬、尺寸這些下游問題不能漏。

UI UX Pro Max

實戰範例 010：為繁中內容站挑選字體配對