负 letter-spacing 会使字母间距变小,小字号下易重叠或渲染异常;安全范围为 -0.5px 至 -1px,中文慎用,需优先写单位,影响 ellipsis 截断位置,中英文混排时应避免全局设置而改用 span 包裹英文单独控制。

letter-spacing 设置负值会怎样
负的 letter-spacing 会让字母实际靠得更近,但不是所有字体都“撑得住”——尤其在小字号下容易出现重叠或渲染异常。浏览器不会报错,但视觉上可能突然变糊、断字,甚至触发某些旧版 Safari 的文本裁剪 bug。
- 安全范围一般控制在
-0.5px到-1px之间;中文场景慎用负值,汉字笔画密集,-0.2px 就可能让“林”字两木粘连 - 使用时优先写单位(
letter-spacing: -0.5px),不写单位(如-0.5)会被忽略 - 它不影响换行逻辑,但会影响
text-overflow: ellipsis的截断位置——负间距可能导致省略号提前出现
中英文混排时 letter-spacing 的陷阱
中英文混排下,letter-spacing 会无差别作用于所有字符,包括汉字、标点、空格。这常导致中文段落“被拉散”,而英文单词反而挤成一团。
- 别对整个
p或div直接设letter-spacing;改用span包裹纯英文内容单独控制 - 中文排版真正需要的是“字距调整”,应考虑
font-kerning: auto或 OpenType 特性(如font-feature-settings: "kern"),而非letter-spacing - 如果必须统一微调,建议用
em单位(如0.02em),比px更适配不同字号缩放
letter-spacing 和 word-spacing 的区别在哪
letter-spacing 控制字符间距离,word-spacing 只影响单词之间的空格(含空格符、制表符等分隔符)。它们互不干扰,但叠加使用时容易误判效果来源。
-
letter-spacing对中文“字”也生效,word-spacing对中文基本无效(因为中文没有空格分词) - 当同时设置两者,比如
letter-spacing: 1px; word-spacing: 2px,一个英文单词内部字母间距 +1px,单词之间额外 +2px - 注意:
word-spacing的“单词”由 Unicode 分词规则决定,像hello-world在多数浏览器里仍算一个单词,不受word-spacing影响
移动端 letter-spacing 渲染不一致的原因
iOS Safari 和部分安卓 WebView 对 letter-spacing 的像素级处理更“保守”,尤其在 subpixel 场景下,0.1px 或 0.3px 常被四舍五入为 0,导致设计稿和真机差一截。
立即学习“前端免费学习笔记(深入)”;
- 避免使用
0.1px、0.3px这类非整数值;优先尝试0.05em或0.1em,相对单位在缩放时更稳定 - Android Chrome 80+ 支持
letter-spacing: normal(默认值),但低版本可能解析为 0,如有重置样式,别漏掉这个回退 - 遇到文字边缘发虚?可能是开启硬件加速(
transform: translateZ(0))后,letter-spacing 被强制重绘——此时可加-webkit-font-smoothing: antialiased缓解


















