letter-spacing

**letter-spacing** CSS 属性设置文本字符之间的水平间距行为。此值在渲染文本时会添加到字符之间的自然间距中。letter-spacing 的正值会导致字符之间距离更远，而负值则会使字符之间距离更近。

试一试

语法

css
/* Keyword value */
letter-spacing: normal;

/* <length> values */
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: 0.3px;

/* Global values */
letter-spacing: inherit;
letter-spacing: initial;
letter-spacing: revert;
letter-spacing: revert-layer;
letter-spacing: unset;

值

normal

当前字体的正常字母间距。与值 0 不同，此关键字允许 用户代理 更改字符之间的间距以对齐文本。

<length>

指定除了字符之间默认间距之外的额外字符间间距。值可以为负数，但可能存在实现特定的限制。用户代理可能不会为了对齐文本而进一步增加或减少字符间间距。

无障碍访问

过大（正或负）的 letter-spacing 值会使应用样式的单词变得难以阅读。对于使用非常大的正值设置样式的文本，字母之间的距离会很远，以至于单词会看起来像一系列单独的不连接的字母。对于使用非常大的负值设置样式的文本，字母会彼此重叠，以至于单词可能无法识别。

可读的字母间距必须根据具体情况确定，因为不同的字体系列具有不同的字符宽度。没有一个值可以确保所有字体系列都能自动保持其可读性。

国际化问题

某些书写语言不应应用任何字母间距。例如，使用阿拉伯语脚本的语言期望连接的字母保持视觉上的连接，如下例所示。应用字母间距会导致文本看起来断裂。

شسيبتنمك

正式定义

初始值normal
应用于所有元素。它也适用于 ::first-letter 和 ::first-line。
继承是
计算值由绝对长度或关键字 normal 组成的最佳值
动画类型一个 长度

正式语法

letter-spacing = 
  normal    |
  <length>

示例

设置字母间距

HTML

html
<p class="normal">letter spacing</p>
<p class="em-wide">letter spacing</p>
<p class="em-wider">letter spacing</p>
<p class="em-tight">letter spacing</p>
<p class="px-wide">letter spacing</p>

CSS

css
.normal {
  letter-spacing: normal;
}
.em-wide {
  letter-spacing: 0.4em;
}
.em-wider {
  letter-spacing: 1em;
}
.em-tight {
  letter-spacing: -0.05em;
}
.px-wide {
  letter-spacing: 6px;
}

结果

规范

规范
CSS 文本模块第 3 级
# letter-spacing-property

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅