letter-spacing加transition必须用带单位的具体数值（如0.5px→6px），因normal是关键字不可插值；旧版safari建议0.1px起步；推荐0.25s–0.4s缓动，慎用大值及中英混排。
直接给 letter-spacing 加 transition 是可行的，但必须确保初始值和悬停值都是具体数字（不能是 normal），否则动画不触发或跳变。
为什么 letter-spacing: normal 不能参与过渡
浏览器不把 normal 当作可插值的数值——它是个关键字，不是长度单位。你写 letter-spacing: normal → letter-spacing: 8px，中间状态无法计算，结果就是瞬间切换，没有动画。
- ✅ 正确做法：统一用带单位的值，比如
0px、2px、6px - ❌ 错误组合：
letter-spacing: normal和letter-spacing: 6px搭配transition会失效 - ⚠️ 注意：某些旧版 Safari（≤15.4）对
letter-spacing过渡有渲染延迟，建议用0.1px起步而非0来规避
如何实现平滑拉开 + 收回的 hover 动画
关键在声明一致的过渡属性和合理取值范围，避免文字突然“炸开”或重叠。
- 初始值建议设为
letter-spacing: 0.5px或1px（比0更自然，防字体紧贴） - 悬停值控制在
4px–8px之间，再大易导致排版断裂，尤其在小屏幕或窄容器中 - 过渡时间推荐
0.25s–0.4s，太慢显得迟滞，太快失去感知 - 示例代码：
.spaced-text { letter-spacing: 0.5px; transition: letter-spacing 0.3s ease-out; } .spaced-text:hover { letter-spacing: 6px; }
配合 transform 或 opacity 做复合动画时的注意事项
单纯拉间距有时显得单薄，加一点位移或透明度变化能增强动效层次，但要注意叠加逻辑。
- 如果同时用
transform: translateY(-2px)和letter-spacing，两个属性都要写进transition，否则后者会突变 - 别在同一个元素上混用
letter-spacing和word-spacing动画——它们影响不同层级，容易造成节奏错乱 - 移动端慎用大间距值（如 >6px），iOS Safari 对高 letter-spacing 的文本重排较慢，快速进出 hover 可能出现闪烁
- 若文本含中文/Emoji，注意某些字体对非 ASCII 字符的 letter-spacing 渲染不一致，建议加
font-variant-east-asian: full-width统一处理
真正容易被忽略的是字体本身对 letter-spacing 的响应粒度——等宽字体（如 monospace）变化最稳定，而可变字体（如 Inter Variable）可能因字重切换干扰间距动画节奏，上线前务必在目标字体下实测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
