前端面試：如何用 font-size-adjust 穩定後備字型的可讀性？

題幹與適用場景

設計系統使用品牌字型，但網路、授權或腳本覆蓋會讓瀏覽器暫時或永久使用後備字型。請說明如何用 font-size-adjust 減少兩套字型在小寫字母可讀尺寸上的跳變，並說明它與行動裝置文字自動放大的區別。

面試官考察點

• 是否理解字型的 x-height 與字級不是同一個度量。
• 是否能解釋後備字型校準、字型載入和漸進降級的邊界。
• 是否把視覺一致性、腳本覆蓋和無障礙測試放在同一方案中。

回答前需要釐清的問題

1. 主字型與後備字型覆蓋哪些語言腳本？
2. 目標是降低字型載入期間的跳變，還是長期使用後備字型也要可讀？
3. 產品是否允許行動裝置文字自動放大，是否有既定的字級和行高令牌？

30 秒回答框架

先說 font-size-adjust 用字型的寬高比指標校準小寫字母的相對高度；再說它不能讓字形寬度、行高和 CJK 指標完全相同。方案上為主字型選擇可測量的後備字型，逐步啟用 from-font 或明確比例，並用腳本、縮放、載入失敗和低視力情境驗證。最後強調 text-size-adjust 處理的是行動裝置文字自動縮放，不能互相取代。

分步驟深入解答

1. 先區分字級與 x-height

font-size-adjust 保持小寫字母相對主字型的可讀高度。兩個字型都設為 16px，x-height 仍可能不同；後備字型因此看起來更小或更大。該屬性調整的是相對度量，不能複製主字型的字形設計。

2. 選擇明確比例或 from-font

明確值適合團隊已測得主字型指標的情況。支援 from-font 時，可以要求瀏覽器從可用字型讀取指標，減少手工常數；仍要驗證目標瀏覽器和字型檔是否提供需要的指標。

3. 把校準放進字型堆疊

:root {
  --body-size: 1rem;
}

body {
  font-family: "Brand Sans", "Fallback Sans", sans-serif;
  font-size: var(--body-size);
  font-size-adjust: from-font;
  line-height: 1.5;
}

屬性只影響使用它的元素及後代。將其放在正文令牌附近，避免局部元件各自採用不同的補償值；若瀏覽器不支援，正常字型堆疊仍應可讀。

4. 處理字型載入時序

校準不能消除字型交換帶來的所有版面變化。配合合適的 font-display、預載策略和可接受的後備字型，分別測量首屏可讀性、文字重排和最終字型到達後的變化。不要為追求零跳變而隱藏正文。

5. 按腳本和語言驗證

一個拉丁小寫比例不能直接代表中文、日文、阿拉伯文或混排文字。為在地化字型堆疊建立樣本頁，檢查標點、數字、粗細、換行和行高；必要時按語言令牌設定不同策略，而不是把比例寫成全站真理。

6. 與 text-size-adjust 分工

text-size-adjust 控制瀏覽器在行動視口中對文字的自動放大。它不校準後備字型的 x-height。面試中應先判斷問題來自字型度量還是行動排版引擎，再選擇屬性，避免為了修復一種問題關閉另一種可存取行為。

7. 設定可觀測驗收標準

在真實裝置和瀏覽器上記錄字型載入成功率、文字版面變化、縮放後的截斷和使用者字型設定下的可讀性。把視覺回歸與螢幕閱讀器、鍵盤操作和高對比度測試一起納入發布門檻。

高品質示範回答

我會把它當成字型度量治理問題。先用主字型和候選後備字型的 x-height 樣本確認差異，再在正文令牌上使用明確比例或 from-font，同時保留可靠的字型堆疊。它只能改善小寫字母的相對可讀尺寸，不能保證字寬、行高或 CJK 混排一致，所以我會測試字型載入成功與失敗、不同腳本、瀏覽器縮放和行動裝置。行動裝置自動放大則由 text-size-adjust 負責，不能用 font-size-adjust 取代。最後以實際版面變化、截斷、可讀性和無障礙結果作為驗收，而不是只看一張截圖。

常見錯誤

• 把 font-size-adjust 說成統一所有字型的字級。
• 把 from-font 當成所有瀏覽器和字型都能讀取的保證。
• 用 text-size-adjust: none 粗暴關閉行動裝置放大。
• 只測英文首屏，不測在地化腳本和字型載入失敗。
• 只看 CLS 數字，忽略縮放、使用者字型設定和螢幕閱讀器體驗。

追問及應對

如果設計要求字寬也一致怎麼辦？

說明該屬性只處理相對高度，字寬仍需選擇更接近的後備字型、調整字距或重新設計換行；不要承諾一個比例能解決全部指標。

from-font 失敗時如何降級？

讓字型堆疊和預設字級本身可讀，並透過特性偵測或漸進增強使用明確值；把失敗視為正常網路和瀏覽器條件，而不是渲染阻塞理由。

如何避免字型交換造成按鈕跳動？

為按鈕預留足夠空間，校準後備字型並測量最終字型到達前後的寬度；關鍵操作不應依賴隱藏文字或不可預測的自動縮放。

CJK 頁面也要設定同一個值嗎？

不應直接複用。CJK 沒有與拉丁小寫完全對應的 x-height 語義，應按本地字型和行高樣本單獨驗證。

如何證明沒有損害無障礙？

測試瀏覽器縮放、系統字型偏好、重排後的焦點順序、讀屏朗讀和高對比度；驗證不以固定像素截圖為唯一標準。

面試中如何談瀏覽器支援？

給出目標瀏覽器矩陣和特性偵測計畫，說明不支援時仍使用可讀字型堆疊。不要在沒有矩陣或測試證據時聲稱全面支援。