letter-spacing 能用 transition 动画吗
能，但有前提：必须从一个明确的数值过渡到另一个明确的数值，不能从 normal 开始或结束。normal 不是长度值，CSS 无法计算它的像素等效量，transition 会直接失效，表现为“跳变”。
常见错误现象：letter-spacing: normal → letter-spacing: 4px 看不到动画；浏览器控制台可能不报错，但动画属性压根没触发。
实操建议：
- 起始值统一用
0或具体像素/单位（如0.1em），避免normal - 目标值也必须是可计算的长度，比如
2px、0.5em，别混用单位（2px→0.2em在某些浏览器下可能插值不准） - 声明 transition 时，只写
letter-spacing，别偷懒写all，否则其他隐式变化可能干扰节奏
transition 不生效的三个典型场景
不是代码写错，而是 CSS 层级或渲染机制卡住了动画。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：加了 transition: letter-spacing 0.3s，hover 时文字间距还是瞬时变大。
实操建议：
- 检查是否被更高级别的样式覆盖——用浏览器开发者工具看 computed 样式里
letter-spacing是否真的在变，以及transition是否被 override - 确认元素没有启用
will-change: transform之类导致合成层切换的属性，它有时会绕过 layout 阶段，让letter-spacing变更不触发重排/重绘 - 如果元素是 inline（比如
<span>），且父容器用了font-size: 0或line-height: 0清除间隙，letter-spacing可能被视觉截断，动画存在但看不见
响应式中 letter-spacing 的单位怎么选
用 px 最稳，但缩放体验差；用 em 或 rem 更灵活，但要注意基准。
使用场景：按钮文字随屏幕变大需同步拉开间距，或标题在移动端要收窄字距防溢出。
实操建议：
-
em相对于当前元素的font-size，适合局部微调（如h1 { font-size: 2rem; letter-spacing: 0.05em; }） -
rem相对于根字体大小，适合全局统一节奏，但若根font-size用 viewport 单位动态设置（如html { font-size: clamp(16px, 4vw, 24px); }），letter-spacing也会随之平滑伸缩——这本身就是一种轻量级动态效果 - 避免用
%，CSS 不支持letter-spacing的百分比单位
JavaScript 主动触发动画的注意事项
想用 JS 控制字距伸缩（比如点击切换、滚动监听），别直接改 style，得靠 class 切换或 force reflow。
常见错误现象：JS 连续设置两次 element.style.letterSpacing，第二次被浏览器合并优化，动画只执行一次。
实操建议：
- 优先用 class 控制：
el.classList.add('spaced')，CSS 里定义.spaced { letter-spacing: 3px; transition: letter-spacing 0.4s ease-out; } - 如果必须用 JS 写内联样式，中间加一句
getComputedStyle(el).letterSpacing强制触发 reflow，再设新值 - 注意 timing：不要在
requestAnimationFrame外高频修改，尤其配合 scroll 事件时，容易因 layout thrashing 导致掉帧
最常被忽略的一点：字体本身会影响视觉间距感。同一组 letter-spacing: 2px，在 font-family: 'Helvetica' 和 'Noto Serif' 下的“松紧感”差异很大。动态伸缩前，先确认字体加载完成，否则 FOUT 阶段的 fallback 字体可能让动画看起来错位或突兀。
