題幹與適用場景
設計系統中的按鈕、標籤和標題常以視覺稿的幾何中心對齊，但 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. 使用簡寫並保留局部範圍
.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 下驗證區塊軸行為。
誤區五：只看視覺，不看操作
裁切不能縮小觸控、鍵盤焦點或可讀區域。追問時給出最小尺寸、焦點環和輔助技術檢查。