letter-spacing 是统一调节字符框间空白的排版属性，非逐字控制；它影响所有字符框右缘间距，单位需按场景选em/rem避免失效，误用易致中文粘连、英文断裂、iOS闪动。
letter-spacing 不是“逐字符控制工具”，而是统一调节字符框之间空白的排版属性；设对值能立刻提升标题呼吸感，设错值反而让中文粘连、英文缩略词断裂、iOS 上闪动跳变。
letter-spacing 的实际影响范围：它拉的是“框”，不是“字”
它在每个字符的渲染框右边缘统一插入或扣除空间，所有相邻字符（汉字、英文字母、数字、标点、空格）都受控。这意味着：
- 中文标题
“联系我们”加了letter-spacing: 0.04em，效果是“联|系|我|们”，而非只调“联”和“系”之间 - 英文缩略词如
W3C会被拆成W|3|C，视觉上断裂——这不是 bug，是预期行为 - 负值如
letter-spacing: -0.05em在 14px 中文下已接近笔画粘连临界点，小字号慎用 - 该属性具有继承性：
section { letter-spacing: 0.02em; }会让内部所有span、em也带这个值，除非显式重置为normal
单位选错 = 响应式失效：px、em、rem 的真实差异
单位决定间距是否随上下文缩放，直接影响多端表现：
-
px固定不变：在 Retina 屏上可能过细，在用户放大字体时无法跟随，仅适合极少数需绝对锁定的场景（如图标字体对齐） -
em基于当前元素font-size：适合标题微调，例如h1 { font-size: 2.5rem; letter-spacing: 0.03em; }，字号变大时间距自动放大，保持比例协调 -
rem基于根元素font-size：适合全局节奏统一，但必须确保:root { font-size: 16px; }明确定义，否则在动态修改根字号的项目中会失准 - 避免用
pt、mm：屏幕渲染中无实际意义，仅在 print stylesheet 中偶有用途
常见误用场景与修复方式
很多人拿 letter-spacing 解决它本不负责的问题，结果引入新问题：
- 想让
text-transform: uppercase的英文标题更舒展 → 实际应优先启用font-kerning: normal+ 使用自带 kern 表的 WebFont，letter-spacing只作轻量补偿（≤0.05em） - 中文按钮文字被撑出容器 → 检查父级是否设置了
letter-spacing，并在按钮内加letter-spacing: normal主动重置 - JS 切换 class 动态改
letter-spacing，iOS Safari 首次渲染闪动 → 加transition: letter-spacing 0.2s ease缓解，或改用transform: translateX()模拟（注意语义损失） - 设计稿要求 “AV”、“To” 特定字母对收紧 →
letter-spacing无能为力，需用零宽空格 +span包裹单独控制，或依赖字体本身的 kerning 支持
移动端与小字号下的关键细节
小屏、小字号对字间距更敏感，稍不注意就破坏可读性：
- ≤18px 标题建议用
em单位，例如letter-spacing: 0.03em；固定2px在 iPhone SE 上会显得过松 - 全角中文标点（，。！？）同样被拉伸，调整后务必检查标点位置是否突兀，必要时用
span单独包裹并重置 - 搭配
line-height使用：加大letter-spacing后单行宽度增加，若容器宽度固定，可能触发换行；此时需同步检查line-height是否仍足够容纳新宽度 - iOS Safari 对
letter-spacing动画支持不稳定，首次渲染易跳变，生产环境建议避免直接动画该属性
真正难的不是“怎么设”，而是判断“该不该设”——很多所谓“字太挤”的问题，根源在字体选择、字号过小或 line-height 不足，盲目加 letter-spacing 只是掩盖症状。
