如果你调整过标题字距，很可能已经给 letter-spacing 设过值，但页面仍没达到预期。问题常常出在把字符间距和单词间距混为一谈，或者用了固定 px 导致不同字号下松紧不一。CSS 中把水平方向的文字疏密主要交给 letter-spacing 和 word-spacing 两个属性处理，垂直方向的行距则由 line-height 控制。先分清各自作用范围，再去调整数值，才能避免越调越乱。
一、letter-spacing：逐字控制水平距离
letter-spacing 的作用对象是字符，也就是文本中最小的可见符号。它会在每个字符的默认宽度之后追加一段空隙，因此也被称为字距。这个属性可以接受 normal、长度值以及百分比值，但在实际项目里使用 em 最稳妥。举例来说，标题字号是 28px，设置 letter-spacing: 0.05em 就相当于在每个字符后增加约 1.4px 的空隙。如果改成 0.05rem，则不管字号多大都增加约 0.8px，这在小字号下可能偏大，在大字号下又几乎看不出来。
中文字体排版中，标题加宽是比较常见的用法。适当增加字距能弱化汉字密集排列带来的压迫感，特别适合科技、政务、品牌类页面的主标题。但正文段落不要轻易加宽，中文阅读依赖连续字符形成词组和句块，过大的字距会逼迫眼球做更多停顿，阅读效率明显下降。英文场景下，大写缩写词如 API、NASA 等可以设置 0.02em 到 0.08em 的字距，让字母之间不至于粘连。
.title {
font-size: 28px;
letter-spacing: 0.05em;
}
.article-paragraph {
font-size: 16px;
letter-spacing: normal;
}
.english-abbr {
letter-spacing: 0.04em;
}
还要注意 letter-spacing 的继承特性。它是继承属性，如果给某个容器设置了字距，内部所有文本都会沿用。因此更推荐把字距定义在具体标题类或工具类上，不要直接加在 body 上，否则正文、按钮、表单里的文字都会受到影响。若某个子元素需要恢复默认，可以显式写 letter-spacing: normal。
二、word-spacing：只影响空格分隔的单词
word-spacing 与 letter-spacing 经常被拿来比较，但它的作用范围更窄，只调整单词之间由空格产生的距离。对于英文、德文、法文等使用空格分词的语言，这个属性可以直接改变整段文本的松紧。对于中文、日文这类没有空格分词习惯的文字，给 word-spacing 设置数值通常看不到任何变化，因为字符之间并不是靠空格分隔的。
默认值 normal 下，空格宽度由字体内部的空格字符决定，不同字体的空格宽度并不相同。设置 word-spacing: 0.1em 会在原有空格宽度的基础上再增加约 0.1em。也可以设置负值，让单词靠得更近，但负值过大时单词会互相覆盖，英文可读性会迅速恶化。简单判断标准是：标题可以稍微收紧或放宽，正文段落最好保持 normal 或不超过 0.05em 的调整。
.english-article p {
font-size: 16px;
word-spacing: 0.03em;
}
.hero-title {
font-size: 32px;
word-spacing: 0.08em;
}
.tight-labels {
word-spacing: -0.05em;
}
需要特别注意的是，word-spacing 不会影响字母之间的距离，也不会改变连字符或标点后的空隙。如果你的页面是中英文混排，英文部分可以用 word-spacing 调整，中文部分要使用 letter-spacing。两者可以同时存在于同一个元素上，各自负责各自的维度，但混合使用前最好先在真实内容上测试，避免出现英文单词之间太松、中文字符又太紧的割裂感。
三、两端对齐时如何避免最后一行的间距问题
当段落设置 text-align: justify 时，浏览器会拉伸每一行的空格宽度来让左右边缘对齐。这个过程会与 word-spacing 相互叠加。如果给英文段落设置了较大的 word-spacing，再加上两端对齐的空格拉伸，某些行可能出现明显空洞。反之，如果 word-spacing 设成负值，两端对齐能调整的余地变小，行尾可能出现参差。对于西文内容，建议先让 word-spacing 保持 normal，只用 text-align: justify 控制对齐，视觉会更稳定。
中文两端对齐的机制略有不同。浏览器通常压缩或拉伸标点符号以及少量空格，而不是强行改变汉字之间的距离，因此 letter-spacing 对中文 justify 的影响相对间接。真正容易出问题的是最后一行。text-align: justify 默认不会拉伸最后一行，除非设置了 text-align-last: justify。如果希望最后一行也两端对齐，必须显式声明 text-align-last，但要接受最后一行字数较少时被剧烈拉伸的结果。
.article-text {
text-align: justify;
text-align-last: left;
word-spacing: normal;
letter-spacing: 0.01em;
}
.article-text.last-line-justify {
text-align-last: justify;
}
从阅读体验看，正文不建议设置 text-align-last: justify，因为最后一行通常是不完整的句子，强行拉伸只会增加视线回扫成本。标题、卡片描述等短文本则可以根据版面需要开启，配合适当的 letter-spacing 或 word-spacing，让两端边缘更整齐。调试时可以逐渐增减数值，不要一次性给太大，很多间距问题在 0.01em 的差异下就已经很明显。
四、响应式与无障碍场景下的间距策略
移动端字号通常比桌面端小，同样数值的 letter-spacing 在小字号下会显得更宽，因为字距相对字形比例变大。因此在媒体查询中，应该为小屏单独设置更小或归零的字距。比如桌面端标题使用 0.06em，移动端可以降到 0.02em 或 normal。使用 em 而不是 px，本身已经能随字号缩放，但如果设计稿要求小屏更紧凑，还是需要额外覆盖。
推荐使用 CSS 变量集中管理间距值。这样不同组件之间可以共享同一套比例，调试时只改变量，不需要逐个选择器修改。还可以结合媒体查询和容器查询对局部组件做差异化处理。按钮和导航这类短文本可以保有较大的字距，正文和长文本则应优先保证阅读流畅。
:root {
--title-letter-spacing: 0.06em;
--text-word-spacing: 0.02em;
}
.page-title {
font-size: 28px;
letter-spacing: var(--title-letter-spacing);
}
.article-body p {
font-size: 16px;
word-spacing: var(--text-word-spacing);
}
@media (max-width: 600px) {
:root {
--title-letter-spacing: 0.02em;
--text-word-spacing: normal;
}
}
无障碍方面，过大的字距可能影响阅读障碍用户识别词块，过大的词距也会切断英文单词的连续感。WCAG 没有给出行距和字距的硬性数值规定，但要求文本可读、可缩放、不因样式导致信息丢失。因此不要在正文中为了视觉风格设置超过 0.1em 的 letter-spacing 或 word-spacing。如果用户启用了系统放大或自定义字体，em 相对单位能更好地保持比例，避免固定 px 值在大字号下突然变得拥挤。
CSS字体间距letter-spacingword-spacing修改时间：2026-09-24 00:49:01