字距

類別

緊密字距的鍵已包含負長度，請直接使用 tracking-tight。不支援 -tracking-tight 這類加上負號的 token 形式。

值

非零的預設值使用 em，以宣告 letter-spacing 的元素字型大小為基準。tracking-normal 提供零；需要原生關鍵字時，請使用 (letter-spacing:normal)。

繼承的字距會保留已計算的長度

tracking-widest 提供 .12em，在 16px 的字型大小下會計算為 1.92px。字型大小為 32px 的子元素繼承的是這個長度，不會自動將字距加倍。

兩個子元素的字型與大小相同。繼承的 letter-spacing 長度仍是 1.92px；重新套用 class 則會依子元素 32px 的字型大小計算 .12em。

文字說明

1. 父元素使用 font-md 與 tracking-widest。根元素字型大小為 16px 時，.12em 字距會計算為 1.92px 長度。
2. 兩個子元素範例都使用 font-3xl，也就是 32px，並使用相同的單字與字型。
3. 第一個子元素繼承已計算的 1.92px 字距。第二個重新套用 tracking-widest，於是 .12em 會以 32px 為基準計算，得到 3.84px。
4. 即使字形大小不變，第二個文字盒仍然更寬。有色引導線顯示版面寬度，不是字形的實際繪製範圍，也不是 tracking 輸出的邊框。

在子元素套用 tracking-widest，就會依它自己的 32px 字型大小計算 .12em，得到 3.84px。這與行高使用的無單位比例不同。

字距調整的是文字間隔，不會拉伸字形。它可能改變換行位置；請讓容器可以增長，並檢查實際使用的字型與語言。

text-* 文字樣式包含 letter-spacing 宣告。在同一元素且條件相同時，tracking-* utility 會排在這個組合樣式之後，可覆寫其字距。需要字面長度時，請使用 (letter-spacing:-.03em) 這類原生宣告。

另見 行高與文字樣式的配套 token與原生字距行為.

用法

以相同字型大小，比較同一句文字使用兩種字距值的差異。

<div>  <p class="… font-lg tracking-tight">Letter spacing shapes this line.</p>  <p class="… font-lg tracking-widest">Letter spacing shapes this line.</p></div>

@layer theme {  :root,  :host {    --tracking-tight: -.02em;    --tracking-widest: .12em;    --font-size-lg: 1.125rem  }}@layer utilities {  .font-lg {    font-size: var(--font-size-lg)  }  .tracking-tight {    letter-spacing: var(--tracking-tight)  }  .tracking-widest {    letter-spacing: var(--tracking-widest)  }}

自訂

修改預設值或新增 token：--tracking-display 會建立 tracking-display。

@theme {  --tracking-tight: -.03em;  --tracking-display: -.05em;}

@layer theme {  :root,  :host {    --tracking-display: -.05em  }}@layer utilities {  .tracking-display {    letter-spacing: var(--tracking-display)  }}

另見 主題指令與文字排版.