letter-spacing本身不会造成文字重叠，它只是在每个字符右侧插入固定间距；所谓“重叠效果”需依赖margin负值、transform或字体渲染特性实现，letter-spacing仅为配合项而非主力。
直接说结论：letter-spacing 本身不会造成文字重叠，它只是在每个字符右侧插入固定间距；所谓“重叠效果”，必须靠 margin 负值、transform 或字体自身渲染特性来实现——letter-spacing 只是配合项，不是主力。
为什么 letter-spacing 设负值不等于重叠
letter-spacing: -1px 的作用是把每个字符的渲染盒往左“挤”一个像素，但浏览器仍按字符逻辑边界排布，不会主动让笔画穿透彼此。真正出现视觉重叠，往往是因为：
- 字体本身字宽窄（如某些等宽中文字体“口”“日”宽度仅 0.6em），再叠加负
letter-spacing，导致相邻字形区域交叠 - 小字号（≤14px）下，-0.03em 以上负值就容易让“点”“横”“竖”粘连，尤其在非 retina 屏上更明显
- 部分 WebFont 缺少 kerning 表，
letter-spacing微调无法弥补字母对（如 AV、To）的天然间距缺陷，强行收紧反而暴露结构问题
用 margin-right 负值制造可控重叠
这是最常用、兼容性最好的“伪重叠”手法，适用于 span、div、p 等常规文本容器，但要注意：
- 给单个字符包裹
span，再设margin-right: -2px，比全局设letter-spacing: -2px更精准，避免整段文字塌陷 - 若父容器是
display: flex且justify-content: center，负margin会破坏居中，此时改用transform: translateX(-2px)更稳妥 - 不要在
input或button内部用该技巧——表单控件内部文本不响应子元素margin，且 Safari 旧版本会忽略 - 配合
overflow: hidden父容器可裁掉溢出部分，强化“咬合”感
中文标题微重叠的实操边界
中文没有 kerning 概念，所谓“交融”本质是控制视觉密度。实际能安全使用的负向空间极小：
立即学习“前端免费学习笔记（深入）”；
- 推荐用相对单位：
letter-spacing: -0.02em（比-1px更适配不同字号） - 必须搭配
line-height: 1.6以上，否则上下行文字会因行高不足而“叠影” - 禁用场景：字体为
PingFang SC、Noto Sans CJK时，负值超过-0.03em就大概率出现“田”字中间一横被隔壁字的竖笔吃掉 - 如果设计稿要求“字字咬合”，优先考虑用 SVG 文字或 CSS
clip-path切割，而不是硬调letter-spacing
中英文混排时的 spacing 分离策略
同一个 letter-spacing 值对汉字和拉丁字母的视觉影响差异极大，混排时几乎必然失衡：
- 用
:lang(en)选择器单独收紧英文：p:lang(en) { letter-spacing: -0.05em; } - 或给英文部分加
span.lang-en，再设.lang-en { letter-spacing: -0.08em; } - 避免用
word-spacing替代——它只作用于空格分隔的“单词”，对中文无效，且在white-space: nowrap下完全失效 - 检查 computed style 时重点看
letter-spacing是否被继承覆盖：父级设了letter-spacing: 1px，子级没重置，那英文也会被拉宽，进一步加剧松散感
真正难处理的不是怎么叠，而是叠完之后是否还能被屏幕阅读器正确朗读、是否在缩放 200% 时依然可读、以及高对比模式下重叠区域会不会变成一团黑块——这些没法靠 letter-spacing 解决，得从语义结构和辅助技术层面补位。
