设计稿上标题两个字挨得太紧，前端第一反应是敲空格，结果复制出来一堆空白字符。正确做法是用 CSS 的 letter-spacing，它控制每个字符之间的距离，中文英文都生效。

基本写法是 letter-spacing: 2px，数值可以是 px、em、rem，也可以用 normal 表示默认。用 em 更灵活，比如 0.05em 会跟着字号一起变，标题放大后间距不至于太挤。负值也能用，-0.5px 会让字凑近，适合大字标题。

它和 text-align、line-height 不是一类东西，前者管对齐，后者管行高；字间距只影响字符之间的横向距离。

中文字间距给多少合适

正文一般 0 到 0.5px，标题可以 1 到 2px，再大会显得散。小字号加 0.05em 左右比较自然，大屏 banner 上的大标题可以到 0.1em。不要给整段正文加 2px 以上，读起来会断句，眼睛也累。

和 word-spacing 的区别

word-spacing 只调整单词之间的空格，对连续中文基本没效果；letter-spacing 是逐字加间距，标点符号也会被撑开。想让中文段落首行缩进，用 text-indent: 2em，别拿全角空格凑。

.title { letter-spacing: 0.08em; } .note { letter-spacing: -0.5px; }

letter-spacing 会被子元素继承，写在父级上要留意。它还会影响元素的宽度计算，加了间距后文字可能换行，配合 white-space 或容器宽度一起调。

中文字体本身自带字面框，不同字体同一数值的视觉效果不一样，黑体比宋体更吃间距。调的时候以实际加载的字体为准，别只看设计软件里的预览。

主流浏览器都支持这个属性，不用加厂商前缀。移动端小屏幕更要克制，字间距过大加上窄屏，一行放不下几个字，阅读体验反而差。

还有一个细节，letter-spacing 加在最后一个字后面也会产生间距，居中按钮文字时会看起来偏左。需要精确居中时，给元素补一个等量的负 margin-right，或者用 flex 加 padding 抵消。

调试时在浏览器开发者工具里直接改数值，看实际渲染最靠谱。设计稿给的间距是按特定字体量的，换字体后效果会变，别死抄一个数。