letter-spacing 是排版呼吸感的底层调节器，非修图式微调工具；调准则标题稳而透气，调错0.01em即致中文粘连、英文断裂、ios闪动。
直接说结论：letter-spacing 不是用来“修图式微调”的工具，而是排版呼吸感的底层调节器；值调得准，标题立刻稳、透气；调错 0.01em，中文就粘连、英文就断裂、iOS 就闪动。
英文大写标题为什么必须加 letter-spacing？
text-transform: uppercase 会把字母转成大写形态（比如 a → A），但字体自带的字距表（kerning）是为小写设计的，大写后字形变方、宽度变窄，浏览器仍按原字距渲染，结果就是 “CONTACT” 看起来像 “CONTACT”——挤成一块。这不是 bug，是机制使然。
- 安全范围：letter-spacing:
0.03em～0.06em，超过0.08em会破坏单词识别（如 “W3C” 拆成 “W 3 C”） - 别用
px：用户开启系统大字体或页面缩放时，2px间距卡死不动，文字放大但间距不变，视觉上反而更闷 - 优先激活字体自带字距：
font-kerning: normal+ 加载带 kern 表的 WebFont，letter-spacing只作轻量补偿
中文标题加 letter-spacing 容易翻车的三个点
中文每个字是独立字符框，letter-spacing 是在每个字右边缘统一插空或压紧——它不理解语义，只执行机械位移。
- 负值慎用：
letter-spacing: -0.05em在 16px 下已逼近笔画粘连临界点，“的”“人”“了”收笔处可能糊在一起，尤其在低 DPI 屏或 Firefox 渲染下更明显 - 标点同步受控：全角逗号、句号会被一起拉远或压近，加了
0.04em后 “标题，” 可能变成 “标题，” 中间空得突兀 - 继承污染：父级设了
letter-spacing: 0.02em，子元素<span class="highlight">重点</span>也会被撑开，必须显式重置为letter-spacing: normal
移动端小字号标题怎么设才不闪、不崩、不糊？
iOS Safari 对 letter-spacing 动态切换有首次渲染跳变：JS 切换 class 后，先按默认值闪一下，再跳到目标值。这不是兼容性问题，是渲染管线特性。
- 单位必须用
em：letter-spacing: 0.03em是基于当前元素font-size计算的，随字号缩放，真响应 - 加过渡缓解闪动：
transition: letter-spacing 0.2s ease，别用all，只交由该属性动画 - 媒体查询里微增：小屏下视觉密度上升，
@media (max-width: 480px) { h1 { letter-spacing: 0.05em; } }比固定值更稳 - 别用
rem：它依赖:root字号，暗色模式或字体缩放 JS 修改根字号时，所有字距会突变
为什么你调了半天还是觉得“不对劲”？
因为 letter-spacing 调的是“框”，不是“字”——它不管你是汉字、英文字母、数字、空格还是全角逗号，一律等距处理。你看到的“松”或“紧”，其实是所有字符框右缘被统一挪动后的叠加效果。真正影响质感的，从来不是那个数字本身，而是它和字体、字号、行高、容器宽度、设备像素比之间的咬合关系。调完一定要在真机上逐字检查收笔、标点、缩略词，而不是只看设计稿截图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
