字间距与缩进:松紧与首行
同一段文字,letter-spacing 把 每个字形 之后都加上额外间距(称作 tracking),word-spacing 只把额外间距加在 空格字符 上——这意味着对没有空格的纯 CJK 文本,word-spacing 根本无处施加,而 letter-spacing 却仍然逐字拉开。text-indent
则只作用于块的 首行,给段落留出视觉入口;取负值配合等量 padding-left 可做出首行突出、续行内缩的「悬挂缩进 hanging indent」。
切换「文本」pill 到 中文 再调 word-spacing 滑块,会发现字间距几乎不变——verdict 区会说明原因;而 letter-spacing 对英文、CJK 一视同仁。下面的列表项段落演示了 hanging indent 的开关效果,实测首行与续行起点的实际偏差。
1 · 三个属性:作用范围各不相同
-
letter-spacing(字距 / tracking)——在 每个字形之后 加上额外间距,对字母、汉字、假名一视同仁。正值拉开,负值压缩(注意负值可能使字形重叠)。值加在字形右侧,因此行尾字符的 letter-spacing 也生效,会让最后一个字看起来多出空白。 -
word-spacing(词距)——额外间距只叠加在 空格字符 上(U+0020 及同类 break space)。对纯 CJK 文本 完全无效:中文字字相连、没有空格,word-spacing 无处施加;切到「中文」pill 并拖动滑块即可实测这个差异。 -
text-indent(首行缩进)——只对块盒的 第一行 生效,将首行起点向右(正值)或向左(负值)移动。负值 + 等量padding-left就是「悬挂缩进」配方:首行凸出到版心左侧,续行对齐内部正文。 - 悬挂缩进公式:
text-indent: -Xem; padding-left: Xem——开关 pill「开启」演示此效果,verdict 实测首行 vs 续行的 x 坐标差。
letter-spacing 与行末多余空白。 letter-spacing 的间距加在字形 右侧,因此行末最后一个字符也会携带间距,导致视觉上行末「多出一小截」。排版中常见的修法是在行末手动 reset 为 letter-spacing: 0,或用 text-align: justify 配合
text-justify: inter-character 让引擎自行处理末行对齐。
与 font-features 的互补。 本页讲的是「字形之间加间距」,而字体本身内置的字偶距(kerning)与字距(tracking)调整也会影响渲染结果。想深入了解 font-kerning、tab-size、text-autospace 等更细粒度的控制,可参阅
font-features 系列。