按钮悬停时直接设置 letter-spacing 会导致文字错位、图标偏移和热区缩水，根本原因是 button 作为替换元素受 ua 样式与字体度量干扰；正确做法是用 span 包裹文字并单独控制间距，同步调整 padding 与图标位置，并在真机 safari 上验证。
button:hover 里直接设 letter-spacing 会错位
按钮悬停时文字撑开，但很多人一写 button:hover { letter-spacing: 2px; } 就发现“提交”两个字间隙不均、图标飘移、小屏点击热区缩水——这不是效果没生效，而是 button 作为替换元素，其内部文本渲染受 UA 样式、字体度量和行盒计算共同干扰，尤其在 Safari 和旧版 Chrome 中，letter-spacing 容易被 padding 压缩或与 line-height 冲突。
常见错误现象：
-
button加了letter-spacing: 1px后，“确”和“认”之间空隙忽大忽小，右侧字贴边 - 带
<i class="fa fa-check"></i>图标的按钮，图标位置随文字间距一起偏移 - 移动端点击热区变窄：文字横向撑宽，但
padding没同步放大，实际可点区域反而收缩
用 span 包裹文字再 hover 控制 spacing
真正可控的做法是把文字内容用 <span></span> 单独包一层，只对它应用 letter-spacing，避开 button 自身的渲染逻辑干扰。
实操建议：
- HTML 结构改成：
<button><span>立即下载</span></button> - CSS 写成：
button span { letter-spacing: normal; } button:hover span { letter-spacing: 1.2px; } - 中英文混排时更推荐此法：比如
<button><span class="cn">登录</span><span class="en">Login</span></button>，可分别控制.cn和.en的letter-spacing值（中文常用0.5px，英文可用0.8px） - 避免用
em单位——按钮内字号固定，0.05em在transform: scale(0.9)容器里会被舍入为 0，px更稳
悬停时 padding 要同步微调，否则热区失衡
只加 letter-spacing 不动 padding，等于文字变宽但按钮“呼吸空间”没跟上，用户点到边缘容易失焦或误触。
实操建议：
- hover 时同步增加左右
padding：比如默认padding: 8px 16px;，hover 改成padding: 8px 18px;（+2px），让热区宽度匹配文字视觉宽度 - 慎用
padding-left单边调整：button 是 inline 级替换元素，单边 padding 易导致文字水平偏移，破坏居中 - 如果按钮含图标，hover 时建议图标也轻微右移（用
transform: translateX(1px)），避免文字拉开后图标“掉队” - 所有涉及尺寸变化的操作，务必在真机 Safari 上测试——它的行盒计算最苛刻
中英文混排按钮悬停 spacing 要分段控制
“立即 Download”这类按钮，若整段设 letter-spacing: 1.5px，英文部分会被拉得过开，视觉节奏断裂，甚至触发换行。
原因在于汉字字宽大、英文字符窄，等量加空隙后感知差异明显。
实操建议：
- 用
<span></span>分离中英文：<button><span class="zh">立即</span><span class="en">Download</span></button> - CSS 中分别设置：
.zh { letter-spacing: 0.4px; } .en { letter-spacing: 0.7px; } - 禁用
-webkit-font-smoothing: antialiased或text-rendering: optimizeLegibility——Safari 下它们会加剧 baseline 偏差，让中英文悬停时上下浮动更明显 - font-family fallback 链必须以中文字体开头，例如：
font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;，否则英文可能被套用中文字体的窄 x-height，进一步放大 spacing 失衡
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
