letter-spacing 动画需显式声明 transition、避免 normal 值、确保样式作用于文本元素、移动端优先用 px 单位、js 控制时应节流更新或改用纯 css 方案。
letter-spacing 动画不触发？检查是否用了 transition 且属性可动画
CSS 的 letter-spacing 确实支持过渡和动画，但前提是它被明确写在 transition 声明里，且初始/目标值都是有效长度单位（px、em、rem）。常见错误是只写了 transition: all .3s，结果某些浏览器（尤其是旧版 Safari）对 all 的解析不一致，导致 letter-spacing 被跳过。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 显式声明：用
transition: letter-spacing .3s ease，别偷懒写all - 避免用
normal作为起始或结束值——它不是可动画的数值，浏览器会直接跳变 - 确保元素有渲染层：如果按钮用了
transform: translateZ(0)或will-change: letter-spacing，可能意外提升为合成层，反而影响文字渲染精度（尤其小字号时）
按钮 hover 时文字散开又收不回去？重点看伪类状态与继承冲突
很多按钮用 ::before 或 ::after 做装饰，或者父容器设置了 font-family / line-height，而子元素（比如 span 包裹的文字）又单独设了 letter-spacing。hover 时改的是按钮本身的 letter-spacing，但文字实际受多层样式叠加影响，容易出现“看起来动了，但松紧不对称”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把
letter-spacing直接写在按钮的文本元素上（如button或button > span），不要依赖继承 - hover 状态必须成对设置：有
letter-spacing: .1em就得有对应的基础态letter-spacing: 0（别留空或靠继承） - 避免在
button:focus或button:active中漏掉letter-spacing重置，否则点击后文字间距卡在展开状态
移动端文字抖动或模糊？和 subpixel 渲染 + 缩放有关
当 letter-spacing 取值很小时（比如 .05em），在高 DPI 屏幕或 zoom 不为 100% 的浏览器中，浏览器可能无法精确对齐像素，导致文字边缘发虚、闪烁，甚至整行轻微晃动。这不是 bug，是 subpixel 渲染在动态插值时的副作用。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 移动端优先用整数像素值：比如
letter-spacing: 1px比.1em更稳（em会随 font-size 浮动） - 加
backface-visibility: hidden到按钮上，能强制启用 GPU 合成，缓解部分模糊 - 如果必须用相对单位，把基础字号设为偶数（如
16px），让.125em == 2px这类计算更易对齐像素
React/Vue 里动态控制 letter-spacing 卡顿？别在 render 阶段硬算
在组件内用 useState 或 ref 控制 letter-spacing 值时，如果每次鼠标移动都触发 setState（比如监听 mousemove），会导致频繁 re-render 和样式重排，动画立刻变卡。CSS 本身是高效的，瓶颈往往出在 JS 层。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
useRef存当前 spacing 值，配合requestAnimationFrame节流更新，而不是直接setState - 更推荐纯 CSS 方案：用
:hover+transition，或借助@keyframes+animation，JS 只负责 toggle class - 若需响应式间距（如根据屏幕宽度变化），用
calc()或媒体查询，别在 JS 里做字符串拼接再塞进 style
真正难的不是让字距动起来，而是动得干净、不闪、不糊、不卡——这些细节藏在单位选择、状态管理、渲染层级里，一不留神就回到“看起来差不多，但就是不舒服”的老问题上。
