按钮文字错乱主因是letter-spacing意外继承，需重置为normal；字体切换导致错位因line-height依赖字体度量，应显式设置无单位值；移动端慎用负letter-spacing，优先用padding和font-stretch；图标与文字间距应通过span隔离或margin控制。
button里文字被撑开或挤成一团？先看letter-spacing有没有意外继承
按钮文字错乱，八成不是字体本身问题，而是letter-spacing从父级或全局样式里漏进来了。它会继承，且对<button>这种替换元素（replaced element）影响直接——尤其是你给body或div设了letter-spacing: 2px，里面所有button、input、图标字体（比如<i class="fa-home"></i>）全跟着变。
常见错误现象：
- 按钮内中文“登录”变成“登 录”，中间多出空隙
- 英文按钮“Submit”字母间距异常拉长，甚至断开
- 小字号按钮（12px）加了
-1px后字粘连，Safari真机上渲染发虚
实操建议：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 别在
body或通用容器上设letter-spacing，改用显式类名控制，比如.title-spaced只用于<h1> - 给
button加重置：button { letter-spacing: normal; }—— 这比设0更可靠，因为normal才是浏览器默认行为 - 如果必须微调按钮字距，用
em单位（如0.03em），避免像素值在缩放或高DPI屏下失准
font-family切换后按钮文字突然错位？检查字体度量是否一致
换了个新字体（比如从system-ui切到Inter或HarmonyOS Sans），按钮高度塌了、文字贴顶或下沉，大概率是字体的ascent/descent和line-gap不一致，而button的默认line-height又没同步调整。
立即学习“前端免费学习笔记（深入）”；
关键点：
-
button默认line-height是normal，它依赖当前字体的内在度量，不是固定像素 - 等宽字体（如
monospace）和无衬线体（如sans-serif）的基线对齐逻辑不同，混用时容易错位 - WebFont加载期间，浏览器用系统字体fallback，此时
letter-spacing+ fallback字体度量 = 不可控偏移
实操建议：
- 显式设置
button { line-height: 1.2; }（无单位数值），让它脱离字体度量依赖 - 搭配
padding精细控制垂直居中，例如padding: 6px 12px比只靠line-height更稳 - 用
@font-face加载WebFont时，加上font-display: swap，并为fallback字体预设相近的line-height和padding
移动端按钮文字模糊或间距抖动？警惕letter-spacing与subpixel渲染冲突
Safari iOS（尤其iOS 17+）对小字号+负letter-spacing的处理很敏感：12px汉字设-0.5px，可能触发亚像素渲染失败，文字边缘发虚、间距忽大忽小；Chrome Android则可能直接忽略负值。
这不是bug，是渲染引擎对可读性的妥协——它宁可保持最小安全间距，也不让字粘连。
实操建议：
- 移动端按钮字号建议≥14px，低于此值慎用
letter-spacing，优先靠padding和width控形 - 测试真机，别信桌面Chrome模拟器；iOS Safari需单独加
button { -webkit-appearance: none; }再重置样式 - 若必须收紧，用
font-stretch: condensed（配合支持该特性的字体），比硬塞负letter-spacing更干净
按钮内嵌图标+文字时间距崩了？别让letter-spacing污染<i>或<svg>
像<button><i class="icon-user"></i> 用户中心</button>这种结构，一旦父button设了letter-spacing，图标字体（如Font Awesome）会被强行拉伸、错位，甚至图标符号消失——因为图标本质是字符，也吃这个属性。
典型误用：
- 给整个
button加letter-spacing: 1px，指望只拉文字，结果图标变形 - 用
word-spacing想分开图标和文字，但word-spacing对无空格的中文无效
实操建议：
- 把文字包一层
<span>：<button><i></i><span>用户中心</span></button>，然后只对span设letter-spacing - 图标用
margin-right: 4px手动留白，比依赖字符间距更可控 - SVG图标直接设
vertical-align: middle，并统一font-size和line-height上下文，避免基线漂移
最常被忽略的一点：按钮文本排版问题，往往不是单个CSS属性能解决的，而是letter-spacing、line-height、font-family、padding四者在特定字体度量下的耦合反应。调一个，得看另外三个有没有被牵动。
