靜態行銷頁最常見的 Core Web Vitals 扣分點，往往不是大圖，而是網頁字型完成 swap 的那一瞬間：主標上下位移 4–12 像素，價格列與按鈕對齊被打斷，Lighthouse 的 CLS 條立刻轉紅。到 2026 年，CSS 允許你在 @font-face 內使用 size-adjust 以及 ascent-override、descent-override、line-gap-override，在品牌字型尚未完全解碼前，就讓排版引擎依目標度量去計算行框，使視覺上的交換近乎無感。本文面向靜態站與多頁應用（MPA）團隊，提供可重複的量測流程、@supports 漸進增強寫法、font-display 決策表，以及 Safari／WebKit 真機驗收要點。請與 響應式圖片與 LCP、標題 text-wrap: balance／pretty 交叉閱讀，讓「影像軸」與「排版軸」的預算一起閉合。
你將帶走：三組應寫進設計權杖的基線數字、以 90–110% 為起點掃描的 size-adjust 調參區間、欄位 CLS 建議警戒值 0.1（P75），以及 MacHTML 公開定價約 每日 16.9 美元 的雲端 Mac mini rehearsal 基線，用來復現高階主管筆電上的 Safari 文字渲染，而不是只信 Linux CI。
為何網頁字型仍在製造 CLS
系統回退字型與品牌訂製字型在上升高度、下降深度、預設行距上幾乎不可能一致。當 font-display: swap 觸發後，瀏覽器會依新字型的度量重新計算每一行的行框，導覽列、價格表與頁尾同時發生微米級位移，疊加後就是使用者肉眼可見的「抖一下」。靜態站常把關鍵 CSS 內嵌，卻把體積 60–120 KB 的 WOFF2 放在 CDN 上延遲 120–400 ms 才抵達，使 swap 時刻落在使用者已開始捲動的視窗內——這正是欄位 CLS 往往比實驗室 Lighthouse 更差的主因。
傳統補救是 font-display: block 把文字藏起來，結果首屏可讀性暴跌；或用魔法數字負 margin 去「手捏」對齊，維護成本極高。度量覆寫以標準屬性解決幾何不一致，diff 可讀、可回滾，並與 rem、clamp() 等現代排版體系相容。
度量覆寫到底改了什麼
覆寫不會修改字形向量，而是修改參與排版計算的字型度量介面：行高、對齊 flex 子項時的外接盒高度、與相鄰圖示字型的基線關係等。若把 ascent-override 設為 90%，代表告訴引擎依父字型大小的一定比例去建構上升沿，而不是沿用字型檔內建表。錯誤百分比會沿著元件樹擴散：黏性導覽裡的數字徽章、貨幣符號與多語字串會一起錯位。
實務上請在改 CSS 前用 DevTools 記錄三組資料：回退字型的大寫頂線到基線距離、網頁字型同位置的差值、以及 line-height: normal 的差值。把結果寫進設計權杖儲存庫，避免各市場各自拍腦袋。
size-adjust 與手動覆寫的組合
size-adjust 適合「整體縮放差幾個百分點」的情境，常見起點是 94–102%。若波蘭文、捷克文下行字母仍被裁切，再在保持 size-adjust 約 96% 的前提下單獨下調 descent-override。每次只調一個軸、提交一次 Git，搭配截圖對比，避免週五傍晚一次性改四個百分比卻無人記得基準。
以 @supports (size-adjust: 90%) 包裹整個 @font-face，舊引擎會跳過未知宣告而不會整段失效；這與預先載入 <link rel=preload as=font> 可以並存。
font-display 搭配策略
文件與條款頁面優先考慮 font-display: optional：寧可短暫使用回退字型，也要把 CLS 壓到接近零；仍可加輕度 size-adjust，讓偶發 swap 也不突兀。行銷主視覺若必須展示品牌曲線，用 swap 並在 WebPageTest 影片條裡確認交換發生在捲動前 40 ms 內。正文超過 600 字 的段落不要使用 block，否則行動 Safari 使用者往往在字型解除阻塞前就開始捲動，造成跳出上升。
無障礙方面，每次調整度量後應重跑 VoiceOver：度量變化可能改變行邊界提示，即便 DOM 文字未變。為每個語系版本預留 20 分鐘 的螢幕閱讀器冒煙時間，尤其是混排數字與翻譯的標題堆疊。
最後，把最終百分比寫進與設計權杖同級的文件，讓靜態站產生器在預覽與生產輸出同一份 @font-face。預覽與生產 CSS 不一致，是團隊中途放棄度量覆寫的首要原因。
Safari 與 WebKit 的邊界情況
WebKit 會在首個可用字型階段就套用覆寫，即使遠端 WOFF2 仍在解碼——對 CLS 有利，但可能讓 contenteditable 後台裡的插入符號位置輕微漂移。若靜態模板混用行銷字型與可編輯區域，請在 issue 追蹤器單列驗證。穩定 Safari 與 Safari Technology Preview 的度量實作可能相差一個小版本，字型大版本發佈週請兩套都跑。
可變字型若預設 opsz 軸偏高，先降低 size-adjust 再考慮逐軸微調；否則容易陷入「每個軸都轉一圈」的低效迴圈。
可直接貼上的 @font-face 片段
@supports (size-adjust: 90%) {
@font-face {
font-family: "Brand Display";
src: url("/fonts/brand-display.woff2") format("woff2");
font-weight: 100 900;
font-display: swap;
size-adjust: 96%;
ascent-override: 92%;
descent-override: 24%;
line-gap-override: 0%;
}
}單字重 WOFF2 建議控制在 80 KB 內，Apple Silicon 筆電解碼多在 30 ms 內，舊款 Intel Air 仍常見於校園情境，解碼可能到 55 ms，需把預算寫進效能面板。
決策矩陣
| 情境 | font-display | 覆寫策略 | 原因 |
|---|---|---|---|
| 行銷主標 | swap | size-adjust + ascent／descent | 品牌曲線優先，CLS 需上限 |
| 文件正文 | optional | 輕度 size-adjust | 穩定優先 |
| 等寬程式區塊 | swap | 對齊系統等寬 x 高 | 避免 pre 水平抖動 |
| 中日韓在地化 | swap | 分語系量測 | 不可複用拉丁百分比 |
實驗室與欄位 CLS 的差異
Lighthouse 實驗室一輪就能看到覆寫收益，但 CrUX 欄位資料約落後 28 天。建議在頁面內以 web-vitals 採集，依 Safari 使用者代理分段，當 P75 CLS 超過 0.1 時告警。結合工作階段重播抽樣（非全量）定位長尾語系未調參的模板。
若預算緊張，優先處理「英雄文字貢獻總 CLS 超過 35%」的 URL，這類頁面改度量覆寫的 ROI 最高。
常見問題
可變字型也能用嗎？
可以，先看預設軸位置，再調 size-adjust，最後才考慮逐軸 override。
需要預先載入所有字重嗎？
只預先載入首屏關鍵字重；過多預先載入會與 LCP 圖片搶頻寬，4G 剖面上可能拖慢 80 ms。
第三方託管的字型 CSS 怎麼辦？
來自第三方的 @font-face 難以安全調參，應自託管 WOFF2 並掌握完整 CSS。
Apple Silicon Mac mini 雲端實例提供與決策者筆電一致的 Safari 文字渲染與 Core Text 路徑，而不是 Linux headless 的近似。MacHTML 節點支援 SSH 接入自動化截圖與 WebPageTest 腳本，也可選配 VNC 讓設計師逐幀檢查影片條。閒置功耗常在 12 W 左右，把一台驗收用 mini 開兩週字型專項，通常比帶著未驗證的字型堆疊上生產再在董事會簡報時回滾更便宜。
租用模式也避開重資產採購：公開定價頁約 每日 16.9 美元，活動結束後停機即可；度量表留在 git，硬體不必在帳上跨 36 個月 折舊。