題幹與適用場景
設計系統使用品牌字型，但網路、授權或腳本覆蓋會讓瀏覽器暫時或永久使用後備字型。請說明如何用 font-size-adjust 減少兩套字型在小寫字母可讀尺寸上的跳變，並說明它與行動裝置文字自動放大的區別。
面試官考察點
- 是否理解字型的 x-height 與字級不是同一個度量。
- 是否能解釋後備字型校準、字型載入和漸進降級的邊界。
- 是否把視覺一致性、腳本覆蓋和無障礙測試放在同一方案中。
回答前需要釐清的問題
- 主字型與後備字型覆蓋哪些語言腳本？
- 目標是降低字型載入期間的跳變，還是長期使用後備字型也要可讀？
- 產品是否允許行動裝置文字自動放大，是否有既定的字級和行高令牌？
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 語義，應按本地字型和行高樣本單獨驗證。
如何證明沒有損害無障礙？
測試瀏覽器縮放、系統字型偏好、重排後的焦點順序、讀屏朗讀和高對比度；驗證不以固定像素截圖為唯一標準。
面試中如何談瀏覽器支援？
給出目標瀏覽器矩陣和特性偵測計畫，說明不支援時仍使用可讀字型堆疊。不要在沒有矩陣或測試證據時聲稱全面支援。