直接加letter-spacing即可解决button文字拥挤问题，但需按按钮语义、字号、中英文混排等场景差异化设置，慎用负值，避免影响图标位置和移动端渲染一致性。
button里文字太挤，直接加letter-spacing就行
按钮文本默认间距偏小，尤其在小字号（如14px）或紧凑字体（如“Microsoft YaHei”）下，汉字/字母容易显得粘连。最直接有效的办法就是对button元素本身或其内部文本容器设置letter-spacing，而不是去动word-spacing或padding——后者解决的是块级留白，不是字间空隙。
注意：别在全局button上一刀切设值，不同按钮语义和尺寸需求差异大（比如“删除”和“立即开通VIP尊享服务”显然不能用同一间距）。
- 推荐用
px单位起步调试，比如letter-spacing: 1px，视觉变化直观，不随字号缩放失准 - 中文按钮慎用负值，-0.5px 在 12–14px 下就可能让“确”“认”两字笔画触碰，真机 Safari 尤其敏感
- 如果按钮含图标（如 Font Awesome 的
<i class="fa fa-check"></i>），letter-spacing会一并影响图标位置，导致错位——此时应把文字单独包一层<span></span>再设样式
中英文混排按钮的间距要分情况处理
像“Download 试用”或“Sign In 登录”这类按钮，单纯设letter-spacing: 1px会导致英文单词内部字母被撑开（Download → D o w n l o a d），而中文部分不变，视觉割裂。这不是 bug，是letter-spacing本就作用于每个字符框的机制决定的。
真正要的是：英文按词间距、中文按字间距、两者之间留合理空隙。但浏览器不自动识别中文词边界，所以得手动干预：
- 把中英文分别包裹：
<button><span class="en">Download</span><span class="zh">试用</span></button> - 然后分别控制：
.en { letter-spacing: 0.05em; }（微调英文内部）、.zh { letter-spacing: 1px; }（拉开汉字）、再用margin-left: 4px补足中英文间隙 - 避免用
word-spacing试图统一处理——它对中文基本无效，且会让英文单词间空隙失控
移动端按钮字间距的兼容性陷阱
在 iOS Safari 上，小字号（≤13px）+ 负letter-spacing（如 -1px）会出现渲染抖动或字符重叠，尤其在快速点击后重绘时。这不是 CSS 写错了，是 WebKit 对 sub-pixel 间距的合成策略问题。
安全做法是：
- 移动端按钮最小字号建议 ≥14px，配合
letter-spacing: 0.5px起步，比强行收紧更可靠 - 用
@supports (letter-spacing: 0.1px)做渐进增强，老安卓 WebView 可能不支持小数像素值，fallback 到normal或整数像素 - 别依赖
text-rendering: optimizeLegibility来“修复”间距——它在按钮上反而可能触发额外字形替换，让“确”字变模糊
按钮禁用态（disabled）的间距容易被忽略
很多项目只给启用态按钮设了letter-spacing，但button:disabled继承了该值，而禁用态通常还叠加了opacity: 0.6或color: #999。这时原间距值会显得更空洞、更虚弱，甚至影响可读性。
必须显式重置：
- 禁用态建议缩小间距，比如启用态是
letter-spacing: 1px，禁用态就写button:disabled { letter-spacing: 0.2px; }，视觉上更“收拢”，符合禁用暗示 - 如果用了自定义字体（如 Inter 或 HarmonyOS Sans），禁用态还要检查字体本身的字宽轴（font-stretch）是否被激活，CSS 层叠后可能意外放大间距
- 测试时务必点按按钮切换状态，观察间距是否突变——有些框架（如 Ant Design）会在禁用时动态加 class，覆盖你写的
:disabled规则
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
