letter-spacing 仅调节字母、数字、标点、空格等 inline-level 字符的渲染间距，不影响换行、制表符、DOM 结构或文本流宽度；对中文效果微弱，主要适用于西文内容。
letter-spacing 能调哪些字符之间的距离
letter-spacing 只影响「字母、数字、标点、空格」等 inline-level 字符的视觉间距，不作用于换行、制表符或元素边界。它不会改变实际 DOM 结构或文本流宽度计算方式，只是渲染层的微调。
常见误用是以为它能压缩中文词间距离——其实对中文效果极弱，因为中文字形本身没有“字距”概念；真正起效的是西文内容（比如 font-family: "Helvetica", sans-serif; 下的英文按钮文字）。
- 有效场景：英文导航栏、代码片段标签、缩写词（如
"CSS"）、带连字符的单词 - 无效场景：纯中文段落、
display: block的容器、被white-space: nowrap强制挤压后的内容 - 注意：
letter-spacing会继承，子元素若未重置，可能意外放大/缩小
负值 letter-spacing 容易导致文字粘连甚至重叠
设成 -1px 或 -0.05em 看似紧凑，但不同字体的字宽差异大，同一值在 "Arial" 和 "Roboto" 下表现可能完全不同。iOS Safari 对负值渲染尤其保守，有时直接忽略。
- 安全做法：优先用
em单位（如-0.02em），避免像素硬编码 - 必测场景：小字号（
12px及以下）、Retina 屏、系统字体降级时 - 典型翻车：按钮文字在 hover 时加
letter-spacing: -0.03em，结果在 iPhone 上字母挤到一起，读成"C SS"
letter-spacing 和 font-kerning 的区别与共存
letter-spacing 是全局均匀拉伸/压缩，而 font-kerning 是字体内置的字偶距（kerning）开关，只修正特定字符对（如 "AV"、"To"）。两者可同时存在，但 letter-spacing 优先级更高，会覆盖 kerning 的视觉效果。
立即学习“前端免费学习笔记（深入）”；
- 推荐组合：
font-kerning: auto;+ 小幅letter-spacing: 0.01em（微调整体密度） - 禁用 kerning 场景：等宽字体排版代码、需要绝对字符对齐时（设
font-kerning: none） - 兼容性注意：
font-kerning在旧版 Android WebView 中不支持，但letter-spacing全平台稳
响应式 letter-spacing 的合理写法
不要用媒体查询为每个断点写死 letter-spacing 值。更可靠的方式是绑定到 font-size 的相对单位，让间距随字号自然缩放。
- 可行方案：
letter-spacing: 0.02em;—— em 会随当前font-size变化，比px更鲁棒 - 避免方案：
@media (max-width: 768px) { .title { letter-spacing: -0.5px; } }（像素值在高 DPR 设备上失效） - 特殊需求：需精确控制时，用 CSS 自定义属性 + JS 动态计算，例如：
style="--ls: 0.015;"，然后letter-spacing: var(--ls);
真正难的不是设值，而是判断该不该设——多数 UI 系统里，正文默认 letter-spacing: normal 反而是最安全的选择。强行统一加 0.01em，往往只是掩盖了字体选择或行高不匹配的问题。
