前端面試題：如何用 text-box-trim 解決字型度量造成的垂直對齊？

題幹與適用場景

設計系統中的按鈕、標籤和標題常以視覺稿的幾何中心對齊，但 CSS 行框會保留字型的上、下 half-leading。請說明如何使用 text-box-trim 與 text-box-edge 控制文字盒，給出瀏覽器支援有限時的落地方案，並解釋字型載入、writing-mode 和無障礙風險。

面試官考察點

能否區分 glyph、字型度量、行框與元素盒模型。
能否準確解釋 text-box-trim 的起始、結束和雙向裁切。
能否用 text-box-edge 選擇 cap、ex、text、alphabetic 或 leading 邊緣。
能否處理邏輯區塊方向、字型回退與漸進增強。
能否用真實瀏覽器矩陣、字型和無障礙證據驗證方案。

回答前需要釐清的問題

目標是視覺置中、跨字型穩定，還是固定行高和基線對齊？
元件是否允許只在支援該特性的瀏覽器啟用？
目標字型、字級、語言、writing-mode 和 zoom 範圍是什麼？
文字是否會換行，焦點環和點擊區域是否必須保持不變？

30 秒回答框架

先說明傳統行框包含字型 half-leading，導致同一 padding 在不同字型上視覺偏移。text-box-trim 裁切區塊軸邊緣，text-box-edge 決定參考的字型度量；可用 text-box 簡寫表達兩者。生產上先保留現有尺寸作為回退，再用特性查詢漸進增強，固定按鈕的最小點擊尺寸，最後按字型、語言、書寫模式和輔助技術檢查。

分步驟深入解答

1. 先畫出四個盒子

區分字形實際繪製區域、字型度量、行盒和元素的 padding/border。裁切文字盒只改變內容在區塊軸上的占用，不應被描述成改變字形輪廓或點擊區域。

2. 解釋 half-leading 來源

當 line-height 大於字型自身行高時，額外空間通常分配到行框兩側。不同字型的 ascender、descender、cap-height 和 x-height 不同，因此同樣的 line-height 會產生不同的視覺中心。

3. 選擇 trim 邊緣

text-box-trim 接受 none、trim-start、trim-end 和 trim-both。按鈕常需要雙向裁切；標題可能只裁切區塊軸起點，以保留與相鄰段落的節奏。

4. 選擇字型度量

text-box-edge 可選 cap、ex、text、alphabetic 或 leading 等邊緣。cap 適合大寫標題的視覺基準，text 更接近字型文字邊界；應根據語言和實際字型測試，不能把某個度量當作所有字型的通用真值。

5. 使用簡寫並保留局部範圍

css

.button {
  text-box: trim-both cap alphabetic;
  padding: 0.625rem 1rem;
}

簡寫同時表達 trim 和 edge。將規則限制在需要的元件，避免全域裁切破壞段落行距、圖示對齊或多行文字。

6. 處理邏輯書寫方向

start 與 end 屬於區塊軸邏輯邊緣，會隨 writing-mode 改變。橫排、直排和 direction 組合都要測量；不要用物理 top/bottom 直覺替代邏輯定義。

7. 設計漸進增強

預設樣式繼續使用現有 line-height、padding 和最小高度；在 @supports (text-box-trim: trim-both) 中啟用增強。若瀏覽器忽略宣告，文字仍應可讀，按鈕仍符合觸控和鍵盤操作尺寸。

8. 驗證字型載入與無障礙

等待目標字型載入後再截圖或測量，涵蓋字型回退、慢網、zoom、系統字型和多語言。檢查焦點指示、截斷、螢幕閱讀器順序和實際點擊矩形；視覺置中不能以犧牲可操作性換取。

設計取捨與邊界

這項特性可減少魔法負 margin 和逐字型偏移，但目前瀏覽器支援有限，且字型度量差異仍然存在。裁切文字盒不會取代 line-height、padding、flex 對齊或合理的最小高度；多行正文、動態字型和複雜 inline 內容應謹慎使用。需要與設計稿對齊時，應記錄目標字型、度量、瀏覽器版本和容差，而非只保存一張截圖。

落地計畫與證據

記錄按鈕、標題的字型、字級、語言、writing-mode 和目標容差。
以現有樣式作為基線，加入 @supports 分支並鎖定最小互動尺寸。
在 Chrome 133 及專案支援的其他瀏覽器中測試；MDN 的 Baseline 標記顯示該屬性仍屬有限可用特性。
用真實字型和回退字型測量視覺偏移、焦點環、換行和 zoom 結果。
將截圖、測量值、瀏覽器版本和回退策略寫入元件驗收記錄。

常見誤區與追問

誤區一：把 trim 當成裁切字形

它主要調整文字盒邊緣，不會把字形輪廓按像素切掉。追問時應回到字型度量、行盒和元素盒模型。

誤區二：全站設定 trim-both

段落、列表和多行內容需要正常行距。回答應說明元件級使用和回退邊界。

誤區三：只在預設字型上截圖

字型載入失敗、語言變化或系統字型會改變度量。必須納入字型回退和慢網測試。

誤區四：忽略邏輯軸

trim-start 不是永遠的物理頂部。應在直排和不同 direction 下驗證區塊軸行為。

誤區五：只看視覺，不看操作

裁切不能縮小觸控、鍵盤焦點或可讀區域。追問時給出最小尺寸、焦點環和輔助技術檢查。