能,letter-spacing负值通过压缩字符框间距使文字视觉粘连甚至重叠,仅限水平方向,中文建议≤-0.03em,需搭配足够line-height并慎用于小字号正文。

letter-spacing 负值真能重叠文字?先看实际效果
能,但只在水平方向生效,且不是“精确叠字”,而是靠压缩字符框间距强行挤在一起。浏览器不会主动让两个汉字笔画物理融合,但当 letter-spacing 足够负、字号足够小、字体笔画较粗时,视觉上就会出现“粘连”甚至“覆盖”感。这和 line-height 设很小导致上下行重叠是两回事——后者是垂直方向,前者纯水平。
哪些场景下用 letter-spacing 负值才合理
别一上来就设 letter-spacing: -5px。真正可用的场景其实很窄:
- 英文缩略词微调:比如
W3C中 W 和 3 粘太紧,加letter-spacing: -0.02em反而更紧凑专业 - 标题视觉压重:大字号中文标题(如
font-size: 48px)配letter-spacing: -0.01em,增强块面感 - 修复 WebFont 默认过松:某些自定义字体加载后字距偏大,用负值回调到设计预期
- 艺术化排版实验:配合
overflow: hidden和固定宽高,制造“挤出框外”的错觉
纯正文段落、小字号(≤14px)、带标点的句子,慎用负值——容易让“的”“了”“。”糊成一团,尤其在 Windows 渲染下更明显。
负值设多少才算安全不翻车
没有统一答案,但有硬约束:
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML,微信编辑器可直接渲染,无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 中文建议上限:≤
-0.03em;超过这个值,16px 以下字体大概率出现“口”“田”类字内部笔画视觉粘连 - 单位优先用
em或rem:避免像素固定值在高清屏或缩放时失真,letter-spacing: -0.02em比-2px更可控 - 必须检查
line-height:负letter-spacing会放大行内拥挤感,搭配line-height: 1.4以下极易引发上下行文字视觉干扰 - 留意继承污染:父容器设了
letter-spacing: -0.02em,里面<span>NEW</span>也会被压扁,得手动重置:span { letter-spacing: normal; }
为什么 word-spacing 对中文重叠无效
因为 word-spacing 只作用于 HTML 中真实存在的空格(U+0020)或换行符,而中文段落里几乎不插空格。写 “欢迎来到首页” 是连续字符流,word-spacing: -10px 完全没反应。只有你显式写成 “欢迎 到 来 首 页”(中间带空格),它才对那些空格起效。想靠它让汉字重叠?不可能。
真正要控制单个汉字间距,唯一靠谱的就是 letter-spacing。其它方案如 transform: translateX() 或绝对定位,成本高、不可继承、响应式难适配,纯属杀鸡用牛刀。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










