優化品牌字體與 CLS

問題

設計稿使用兩種字體和六種字重，但實際頁面只用到標題 700、正文 400 和數字 600。所有字重一起載入會拖慢首屏，fallback 與品牌字體寬度不同也會推動按鈕和標題。

1. 盤點真正使用的字重

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Noto+Sans+TC:wght@400;700&display=swap');

繁中文章要確認字符覆蓋和授權；不能因為設計稿使用一個英文字體，就假設中文會自動有同樣字形。

2. 先讓文字可讀

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

:root {
  font-family: 'Inter', 'Noto Sans TC', 'Brand Fallback', system-ui, sans-serif;
}

size-adjust 等數值要用實際標題和正文比較，不是複製固定答案。字體載入失敗時仍要可閱讀。

3. 測量而非猜測

在快取清除、慢速 4G 和低階裝置下測試：首屏文字出現時間、字體替換後的標題高度、按鈕是否位移，以及 CLS 是否變差。用 DevTools Performance 和 Lighthouse 記錄前後數值。

常見錯誤

• 用 font-display: block 讓整段文字等待字體。
• 為了避免閃爍把文字設成透明。
• 只測英文頁面，忽略繁中字符和 fallback 寬度。
• 只看 Lighthouse 分數，沒有檢查真實裝置的閱讀體驗。

驗收與練習

提供字體清單、字重用途、fallback 策略和慢網路截圖。接著將一個標題換成較寬的 fallback，觀察 CLS 如何變化，再用 size-adjust 把位移降到可接受範圍。