letter-spacing 对中文效果微弱，因其仅在汉字方块间插入固定空白且易被字形吞没；真正适用场景为英文字符，中文调距应慎用负值并优先采用 em 单位配合 font-kerning。
letter-spacing 不是用来“调中文词距”的，它对英文才真正起效；想调中文，得换思路。
letter-spacing 为什么对中文效果微弱
中文字形本身没有“字偶距”（kerning）概念，每个汉字在字体中是独立占位的方块，letter-spacing 只是往每个字符框之间塞固定宽度的空白。实际渲染时，这个空白常被字形边缘吞掉，尤其在小字号或非等宽字体下几乎不可见。
常见误判：看到「你好世界」加了 letter-spacing: 2px 没变化，就以为属性失效——其实是它本就不该负责中文词间逻辑，而是作用于单个“字符单位”，包括英文字母、数字、标点、空格。
- 真正起效的场景：英文导航栏、
CSS缩写、按钮上的全大写文案（如DOWNLOAD） - 中文标题若真要微调，建议只用极小负值（如
-0.01em），且必须在 Retina 屏和系统字体降级下实测 - 别用
letter-spacing替代word-spacing来分隔中文词——中文没空格，word-spacing基本无效
负值 letter-spacing 容易翻车的三个具体表现
设成 -0.05em 看似克制，但在真实设备上可能直接让字母粘连甚至重叠，尤其当字体字宽不均或字号偏小时。
立即学习“前端免费学习笔记（深入）”；
- iOS Safari 对 subpixel 负值极其保守，
-0.1px或-0.3px常被四舍五入为 0，设计稿和真机差一截 - 同一负值在
Arial和Inter下表现差异极大：前者字宽窄，-0.03em 就可能挤出重叠；后者字宽大，同样值反而刚好 - hover 动画里加
letter-spacing: -0.03em是高危操作，iPhone 上容易把CONTACT渲染成CON TACT或CO NTACT
响应式 letter-spacing 的安全写法
别用媒体查询硬写像素值，高 DPR 设备下 -0.5px 直接失准。可靠做法是绑定到字号缩放。
- 优先用
em单位：letter-spacing: 0.02em—— 当前font-size变，间距自动同比例缩放 - 避免
px+ 媒体查询组合，例如@media (max-width: 768px) { h1 { letter-spacing: -0.5px; } } - 如需精确控制（比如 WebFont 加载后动态修复字距），用 CSS 自定义属性 + JS 计算：
letter-spacing: var(--ls, 0.01em)
letter-spacing 和 font-kerning 的关系必须理清
letter-spacing 是全局均匀拉伸/压缩，会直接覆盖字体内置的字偶距（kerning）；font-kerning 则只修正特定字符对（如 AV、To），更精细但依赖字体支持。
- 推荐组合：
font-kerning: auto;+letter-spacing: 0.01em（微调整体密度） - 禁用 kerning 的唯一合理场景：等宽字体排代码，需要绝对字符对齐时设
font-kerning: none -
font-kerning在旧版 Android WebView 中不支持，但letter-spacing全平台稳，别为了 kerning 牺牲兼容性
最常被忽略的一点：它会继承。父元素设了 letter-spacing: -0.02em，子元素里所有 span、em、code 都会跟着收紧——除非你显式重置为 normal 或其他值。
