按钮中英文混排字距不匀的根本原因是letter-spacing对两类字符的视觉影响不同，需用:lang()选择器分流控制、禁用word-spacing、分层微调字距并注意text-transform影响。
按钮里的中英文混排字距不匀，不是字体问题，而是 letter-spacing 对两类字符的视觉影响根本不同——强行统一设值，中文发虚、英文松垮。
为什么 button 上的 letter-spacing 容易翻车
按钮文本通常字号小（14–16px）、行高紧、容器窄，此时 letter-spacing 的微小偏差会被放大：
- 中文字形方正、笔画密集，+0.05em 就可能让「登录」看起来像「登 陆」；
- 英文字母（尤其大写）x-height 小、留白大，同样 +0.05em 却显得稀疏；
-
button默认继承white-space: pre-wrap行为，某些浏览器会忽略子元素的letter-spacing覆盖； - 用 Web Font 时，若字体文件未启用 kerning 或字距表缺失，
letter-spacing只能“修表面”，无法校准基线对齐。
用 :lang() 选择器做精准分流
别在 button 上直接设全局 letter-spacing，改用语言感知控制：
- 确保 HTML 根节点有
lang="zh"，否则:lang(en)不生效； - 给按钮内英文部分加
span lang="en"，中文保持无lang或显式lang="zh"； - CSS 写成：
button { letter-spacing: 0.02em; }<br>button :lang(en) { letter-spacing: 0.08em; }<br>button :lang(zh) { letter-spacing: 0.01em; } - 注意：Safari 对
:lang()在内联元素上的支持较晚（iOS 17.4+ 稳定），旧版本需 fallback 到 class 控制。
避免在 button 上用 word-spacing
word-spacing 对中文完全无效，且在 button 中极易引发不可控偏移：
- 它只作用于空格分隔的“词”，而按钮里「立即注册」和「Sign Up」之间若用空格连接，
word-spacing会把整个空格撑开，导致中英文断裂； - 某些浏览器（如 Chrome Android）会将
word-spacing应用于标点（如「→」），造成箭头与文字脱节； - 更稳妥的做法是：用零宽空格
或letter-spacing微调单侧。
真正起效的按钮字距微调策略
实际项目中，最稳定的做法是放弃“一值统管”，转为三层控制：
- 基础层：按钮默认
font-family按英文优先顺序写，例如"SF Pro Display", "Segoe UI", "PingFang SC", sans-serif，确保英文字形不被中文字体降级拉低； - 视觉层：用
letter-spacing: 0.02em做整体呼吸感，仅针对 16px 及以上字号；14px 及以下禁用letter-spacing，靠padding和line-height提升可触达性； - 修复层：对含图标（如
➤或 Font Awesome）的按钮，用span.icon单独设letter-spacing: normal，防止图标被拉伸变形。
最常被忽略的是：按钮文本一旦用了 text-transform: uppercase，再叠加 letter-spacing，英文会过度松散——这时应改用字体自身的 font-variant-caps: small-caps 或直接选支持 small-caps 的字体。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
