字距悬停（悬停舒展字距可调 CSS 源码）

效果演示（真实可交互）

下方第一行中文「字距悬停舒展」在鼠标悬停时字距会从紧凑平滑舒展到 0.3em，同时变为蓝色；第二行英文「LETTER SPACING」初始就有较宽的 0.2em 字距，悬停时进一步拉开到 0.55em 并变为青色，适合模拟 Logo 舒展。第三行金色文字不依赖悬停，拖动下方滑块即可实时改变它的字距，右侧同步显示当前数值，方便直观感受 letter-spacing 的视觉密度变化。

完整代码

HTML 结构：三行示例文字 + 一个滑块：

<p class="ls-hover ls-cn">字距悬停舒展</p>
<p class="ls-hover ls-en">LETTER SPACING</p>
<p class="ls-live" id="lsLive">实时字距调节</p>
<input id="lsRange" type="range" min="0" max="0.6" step="0.01" value="0.1" />

核心 CSS：悬停舒展只需一条 letter-spacing 过渡：

.ls-hover {
  font-size: 34px; font-weight: 700;
  letter-spacing: .02em;
  transition: letter-spacing .5s ease, color .5s ease;
}
.ls-hover:hover { letter-spacing: .3em; }

原生 JS：滑块实时写入第三行的字距并显示数值：

range.addEventListener('input', () => {
  const v = Number(range.value).toFixed(2);
  live.style.letterSpacing = v + 'em';
  out.textContent = v + 'em';
});

参数说明

兼容性与性能

• letter-spacing 是可过渡属性，所有现代浏览器支持；过渡期间文本重新排版，属布局属性，性能弱于 transform，单行使用无压力
• 中文 0.02em 到 0.3em 的跨度已经足够醒目，超过 0.5em 中文会明显散架
• letter-spacing 作用于行尾字符时会多出尾随间距，居中排版时视觉会偏左，可用 margin-right 负值补偿
• 已适配中文与英文两种字号体系，英文建议初始值就比中文大

常见问题

Q: 悬停时文字会「跳动」而不是平滑？ 过渡时长过短或初始/目标值差太小。保持 .5s 时长，并把字距差拉大到 0.15em 以上。

Q: 字距舒展后文本行变宽，影响布局怎么办？ 悬停类动效尽量用于短标题；若用于长文本，可配合 white-space: nowrap 或把舒展值控制在 0.1em 内。

Q: 想同时缩放字号制造「呼吸」感？ 给同一元素再加 font-size 过渡即可，两者独立过渡不冲突，但字号会触发重排，注意性能。

Q: 可以商用吗？ 可以，粤喵自研原创组件，免费商用无需署名。