CSS text-box-trim 与 text-box-edge：静态营销 HTML 的 cap/双侧修剪、行距控制、图标与文本对齐、Safari WebKit 验收、无障碍与云 Mac mini 演练

靜態營銷落地頁仍常見超大展示標題與窄眉題並存，設計師反覆調整卻仍看到大寫頂線以上、基線以下的「幽靈留白」，其根源在字體度量而非 Figma 自動布局。進入 2026 年，text-box-trim 與 text-box-edge 讓靜態 HTML 作者能用標準屬性把行框貼齊到字形邊界，使標題堆疊、藥丸標籤與圖標行擺脫脆弱的負 margin。本文說明 cap 與雙側修剪的差異、與 flex/grid 組合做圖標加文案對齊、用 @supports 漸進增強、Safari 與 WebKit 的邊界行為，以及無障礙評審如何理解被修剪的行框。請同時閱讀 《CSS text-wrap: balance 與 pretty 靜態標題》 與 《CSS 子網格靜態營銷 HTML》，以便在修剪去掉額外行距後，換行與軌道仍保持一致。

驗收成本同樣現實：在真實 Apple GPU 上復現亞像素基線，比在 Linux CI 截圖上猜測可靠得多。MacHTML 雲 Mac mini 約 $16.9/天，下文把它當作每周 Safari 籤字的預算錨點。

行盒、字距與為何需要修剪

CSS 行框傳統上把整幅字母的上升部、下降部都計入塊尺寸，即使用戶只排全大寫標題。營銷希望大寫 H 的頂線貼近英雄視頻，但字體的外接矩形往往高於 cap 高，所以瀏覽器在 cap 之上仍留空。老辦法是 line-height: 0.9、負 margin 或 transform，但會破壞焦點環與可點區域。修剪把契約搬到布局層：你聲明以哪條字形邊參與行盒邊界，引擎會去掉與當前文本無關的鬆弛。

從 Eleventy、Hugo 等導出的靜態站通常沒有運行時設計令牌，只有長緩存的 CSS 文件。修剪規則必須能在不支持的引擎裡可預測地退化，別指望用前端特性開關在產線裡硬補。把修剪理解成幾何調整、而非改寫字符串，能少和讀屏、PDF 流水線以及未來的度量表升級打架。

多語言同頁時，拉丁大寫和漢字/日文的默認行距節奏不同，單一 line-height 倍率很難兩端討好；配合 text-box-edge: ideographic 可在修剪後仍讓正文保持約 1.6 的舒適行距。上線前在 320/390/834 寬與最長翻譯串下各截一幀，記錄 100% 與 125% 系統縮放下外接非整數比屏幕的半像素問題。

text-box-trim：cap、trim-both 與起止單向

屬性控制行盒的哪一邊向選定的字面向內收。只跟圖像上沿對齊的標題可只用 cap；藥丸裡上下疊放標籤時常用 trim-both 讓內邊距對稱。前一段已經削掉上緣時，可只用起點或終點單向修剪，避免與分割線重複「再削一遍」。

.hero-kicker {
  text-box-trim: cap;
  text-box-edge: cap alphabetic;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

交互部件上，焦點環會越出邊框；修剪行盒不等於縮小焦點內邊距，修剪後的字框與可見環外緣間至少留 3px，以通過 WCAG2.2 的默認焦點外觀。父級若 overflow:clip 圓角裁切，越南語、波蘭語等長下降部在混排時可能被切掉，應在 QA 用例中固定復現。

text-box-edge：參考盒名稱

該屬性在修剪時給出參照盒。cap alphabetic 適合多數拉丁營銷主標題，把大寫頂與大寫底對齊，也與多數圖標字體對 Material 類符號的預期一致。若同欄混用全大寫與句首大小寫，可改 text 用更保守的 em 方框。日文副題若要與拉丁 cap 齊平，可評估 ideographic 成對；可變字重會輕微挪動表意邊線，要保留前後截屏。韓文包在激進子集與粗細分檔下也會有高度差，同樣要統一紀律。

@supports (text-box-trim: both) {
  .price-row {
    text-box-trim: both;
    text-box-edge: cap alphabetic;
  }
}

圖標與行內文字

24px 方視口 SVG 的光學中心常低於拉丁 cap 高。與其到處寫 translateY(-2px)，不如把可修剪的文案包進 span，用 inline-flex 與 align-items:center，讓行高隨修剪後的行盒走。多行說明只給單行題跋做修剪，避免每行各自修剪導致段頂參差不平；可把首行單獨設 span，主體維持 line-height:1.6。

.nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.nav-pill .label {
  text-box-trim: cap;
  text-box-edge: cap alphabetic;
}

靜態包與合表

靜態站利於把聲明集中在 components/typography.css 一類文件裡，避免每段重複。指紋文件名與變更日誌綁定，讓視覺回滾測試在「字距微調」上也能對得上審計。合碼模板提醒 Reviewer 在 100% 與 125% 縮放下重跑 Safari 像素基線，並把 Web 字體 swap 後的 Lighthouse CLS 與無障礙回歸合併記錄。

@supports 漸進

無修剪時可用略緊的 line-height 和顯式 padding-block 先頂住版面；在支持 text-box-trim:cap 時再收掉佔位。對 Firefox LTS 與舊 Safari 也要跑一遍。不要在 flex 父和匿名子行上無意疊加互斥的修剪，若出現「偶發多出一截空」，先查 ::first-line 是否改寫了行高。

.hero-kicker {
  line-height: 1.05;
  padding-top: 2px;
}
@supports (text-box-trim: cap) {
  .hero-kicker {
    line-height: 1;
    padding-top: 0;
    text-box-trim: cap;
    text-box-edge: cap alphabetic;
  }
}

Safari 與 WebKit

大版本升窗應同時用 STP 對照。可變軸在過渡幀間會重算字距，字重從 400 掃到 700 時，相貼的視頻遮罩可能跟抖；過渡期間可關動畫或鎖 font-variation-settings。外接屏非整數 DPR 時，修剪標題與點陣主視覺之間可能差半像素，診斷時可用 --disable-font-subpixel-positioning 取快照，生產勿開。

無障礙

修剪不刪 DOM 文字，但放大用戶依賴穩定的行間節奏；長正文不宜整體修剪。交互字級勿低於常設的 14px 下限。與透明度過渡並用時遵守 prefers-reduced-motion，微動效 220ms 內，避免前庭敏感者看到「慢慢漂移」。

元素對照

元素	建議	原因
H1 上全大寫 kicker	cap + cap alphabetic	去多餘上升部、貼合媒層
價籤數字與幣符	謹慎 trim-both	等寬數字在藥丸內仍居中
多行正文	一般不剪	長讀行距要舒服
圖標行說明	cap	少靠垂直平移

檢查清單

1. 為三個標題級別定義修剪類，並寫清禁止的 margin 捷徑。
2. 在 100% 與 125% 縮放下、最長譯串跑 Safari 真機。
3. 修剪後連結與按鈕的焦點環仍完整可見。
4. 在 Firefox 對比 @supports 開/關截圖，確認退化可接受。
5. 一列中混放拉丁與 CJK，觀察基線漂移。
6. 合併後再跑 Lighthouse 無障礙與 CLS，留意字體的 swap。
7. 把像素 diff 與提交 SHA 存證。
8. 每周在雲端 Mac 上做一次共享機位的回歸，遠程協作時尤其重要。

常見問題

能完全替代 line-height 嗎？

不能。修剪處理度量鬆弛；行高若顯式設定仍管倍數。多數團隊在修剪過的 kicker 上用 1、正文用更大行距。

列印/PDF 呢？

各引擎不同，法務類免責在 Safari 列印為 PDF 前先試一輪。

漸變按鈕裡能剪嗎？

可以，但要重看對比度，因為視知覺上的上下中心會移動。

在靜態頁上把排版做穩，比起死記每個關鍵字，更重要的是在真 Safari、實站字體與常用戶縮放上反覆走查；MacHTML 租一臺 Mac mini（約 $16.9/天）就能給團隊一個不打斷個人筆記本的共用籤字位。