字距

类

紧密字距的键已包含负长度，请直接使用 tracking-tight。不支持 -tracking-tight 这类加负号的令牌形式。

值

非零预设值使用 em，以声明 letter-spacing 的元素字号为基准。tracking-normal 提供零；需要原生关键字时，请使用 (letter-spacing:normal)。

继承的字距保留已计算的长度

tracking-widest 提供 .12em，在 16px 的字号下计算为 1.92px。字号为 32px 的子元素继承的是这个长度，不会自动将字距加倍。

两个子元素的字体和字号相同。继承的 letter-spacing 长度仍是 1.92px；重新应用类则按子元素 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-* 工具类排在该组合样式之后，可覆盖其字距。需要字面长度时，请使用 (letter-spacing:-.03em) 这类原生声明。

另见 行高与文本样式的配套令牌与原生字距行为.

用法

以相同字号，比较同一句文本使用两种字距值的差异。

<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)  }}

自定义

修改预设值或添加令牌：--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)  }}

另见 主题指令与文字排版.