letter-spacing 是调整按钮文字间距最直接有效的 CSS 属性，用于微调中文字体疏密，推荐使用 em 单位以适配响应式，需注意字体特性、text-transform 及移动端渲染限制。
button 里文字太挤？用 letter-spacing 直接调
按钮文字默认紧凑，想让「提交」两个字之间松一点，letter-spacing 是最直接有效的 CSS 属性。它作用于所有内联文本内容，包括 <button> 里的文字，不需要额外包裹 <span>。
注意：它调整的是「字符视觉间距」，不是字宽或 padding；值为正时拉开距离，负值则挤压（慎用，易导致重叠）。
-
letter-spacing: 1px—— 常用微调，适合中文字体，肉眼可见但不突兀 -
letter-spacing: 0.1em—— 更推荐的响应式写法，随字体大小缩放 -
letter-spacing: normal—— 显式重置，避免继承父级样式干扰
为什么给 button 写 letter-spacing 有时没效果？
常见原因是按钮用了自定义字体（比如 iconfont 或 WebFont），而该字体本身字距（kerning）被压缩，或 CSS 中设置了 font-feature-settings: "kern" 等高级排版控制，会覆盖 letter-spacing 的行为。
更隐蔽的情况是：按钮使用了 text-transform: uppercase 后再设 letter-spacing，部分浏览器（如旧版 Safari）对全大写文本的字距计算有偏差。
立即学习“前端免费学习笔记（深入）”；
- 先检查 computed styles，确认
letter-spacing是否被其他规则覆盖（比如来自重置库或组件框架） - 若用 iconfont，尝试临时换回系统字体验证是否生效
- 避免同时设置
letter-spacing和font-variant-ligatures，二者在某些字体下冲突
letter-spacing 和 padding 到底该用哪个？
这是典型混淆点：padding 是按钮容器的内边距，影响整个按钮尺寸和点击热区；letter-spacing 只动文字内部空隙，不影响布局流、不撑开按钮宽度（除非内容溢出触发换行）。
- 想让按钮整体变宽、留更多点击空间 → 改
padding-left和padding-right - 想让「确 定」看起来更舒展、提升可读性 → 改
letter-spacing - 两者可以共存，但不要用
padding替代字距调整，否则在小按钮上容易挤爆边框
移动端按钮加字距要注意什么？
在 iOS Safari 或 Android Chrome 上，过大的 letter-spacing（比如 > 2px）可能导致文字渲染模糊，尤其在非 retina 屏或低分辨率设备上。这不是 bug，而是字体光栅化时像素对齐失准造成的。
- 移动端建议上限设为
letter-spacing: 0.08em（约等于 1.2px @16px font-size） - 避免用固定像素值（如
2px），否则在高 DPI 设备上会被放大得过于松散 - 如果按钮含图标（如
<button><i class="icon"></i> 下载</button>），只对文字部分设字距，图标用margin控制间隔更稳妥
