button上直接设letter-spacing有时没效果，是因为按钮是替换元素，其内部文本渲染受字体度量、ua样式和行盒计算共同影响；常见原因包括使用webfont或iconfont禁用字距、text-transform:uppercase导致旧版safari计算异常、父级样式覆盖，以及含图标时letter-spacing作用于整个内容流引发偏移。
button上直接设letter-spacing为什么有时没效果
不是属性写错了，而是按钮作为替换元素，其内部文本渲染受字体度量、UA样式和行盒计算共同影响。常见失效原因包括：
• 按钮用了 WebFont 或 iconfont，字体本身禁用了字距调整（如 font-feature-settings: "kern"）
• 同时设置了 text-transform: uppercase，旧版 Safari 对大写文本的字距计算异常
• 父级或框架样式（如 Bootstrap 重置）覆盖了你的 letter-spacing，检查 computed styles 确认是否被 normal 覆盖
• 按钮含图标（如 <i class="icon"></i>确定），letter-spacing 会作用于整个内容流，导致图标位置偏移
中文按钮该用 px 还是 em 单位
优先用 px：按钮字号通常固定（如 14px 或 16px），em 在嵌套缩放（如父容器 transform: scale(0.9)）或继承异常时易失真。
• 中文按钮推荐 letter-spacing: 0.5px～1px，视觉舒展且不破坏边框对齐
• 避免 letter-spacing: -0.5px，小字号下文字易粘连，iOS Safari 渲染不稳定
• 绝对不要用无单位值（如 letter-spacing: 0.1），它会乘以不可控的 UA 默认 font-size，结果不可预测
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
想只调中文或只调英文，怎么避免全局拉伸
别在 <button></button> 上直接设，用 <span></span> 包裹目标文字再单独控制：
• 结构示例：<button><span class="zh">立即</span><span class="en">Download</span></button>
• CSS 写法：.zh { letter-spacing: 0.3px; }、.en { letter-spacing: 1.2px; }
• 这样英文部分可适度拉开（适配窄字符），中文保持紧凑，避免混排时视觉失衡
• 切记不用 word-spacing：它对中文无效，且会干扰英文单词内空格（如 “Login Now” 变成 Login Now）
移动端按钮加字距的隐藏陷阱
小屏触控场景下，字距不是越大越好：
• iOS Safari 和部分安卓 WebView 对 letter-spacing > 0.08em（约 1.2px @16px）渲染模糊，本质是像素对齐失准
• 固定像素值（如 2px）在高 DPR 屏会被放大，导致文字断开感过强
• 推荐写法：@media (max-width: 480px) { button { letter-spacing: 0.02em; } }
• 若按钮含图标，图标与文字间空隙用 margin-left 控制，而非依赖 letter-spacing——后者会让图标也“被拉开”
letter-spacing 的定义，而是看到按钮文字松紧不一，却分不清是字体本身特性、UA 样式干扰，还是你包裹的 span 没生效——查 computed styles 比猜更管用。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
