CSS 的letter-spacing 属性用于设置文本字符的间距表现。在渲染文本时添加到字符之间的自然间距中。letter-spacing 的正值会导致字符分布得更远，而letter-spacing 的负值会使字符更接近。

尝试一下

letter-spacing: normal;

letter-spacing: 0.2rem;

letter-spacing: 1px;

letter-spacing: -1px;

<section>  <p>    As much mud in the streets as if the waters had but newly retired from the    face of the earth, and it would not be wonderful to meet a Megalosaurus,    forty feet long or so, waddling like an elephantine lizard up Holborn Hill.  </p></section>

@font-face {  src: url("/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.ttf");  font-family: Amstelvar;  font-style: normal;}section {  font-size: 1.2em;  font-family: Amstelvar;}

语法

/* 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: unset;

值

normal

此间距是按照当前字体的正常间距确定的。和0 不同的是，normal 会让用户代理调整文字之间空间来对齐文字。

<length>

指定文字间的间距以替代默认间距。可以是负值，但有可能会出现 implementation 限制。用户代理不会在此基础上进一步增加或缩减间距来对齐文字。

形式语法

letter-spacing =
normal|
<length-percentage>

<length-percentage> =
<length>|
<percentage>

示例

HTML

<p>letter spacing</p><p>letter spacing</p><p>letter spacing</p><p>letter spacing</p><p>letter spacing</p>

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

结果

可解决的问题

一个很大的正或负的letter-spacing值会将应用这个样式的单词变为不可读的。给文本letter-spacing 属性应用了一个很大的正值，字母之间的距离会很远，以至于文本中的单词将显示为一系列单独的，无有任何关联的字母。给文本letter-spacing 属性应用了一个很大的负值，字母将会互相重叠到一个点，在这个点上单词可能无法识别了。

最佳的易辨认的字母间距（letter-spacing）必须根据具体情况来确定，因为不同的字体系列具有不同的字符宽度。没有任何一个值可以确保所有字体系列自动保持它们的可读性。

无障碍考量

A large positive or negativeletter-spacing value will make the word(s) the styling is applied to unreadable. For text styled with a very large positive value, the letters will be so far apart that the word(s) will appear like a series of individual, unconnected letters. For text styled with a very large negative value, the letters will overlap each other to the point where the word(s) may be unrecognizable.

Legible letter-spacing must be determined on a case-by-case basis, as different font families have different character widths. There is no one value that can ensure all font families automatically maintain their legibility.

• MDN Understanding WCAG, Guideline 1.4 explanations
• Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0

规范

浏览器兼容性

参见

• font-kerning