按钮文字用letter-spacing需谨慎：应仅作用于纯文字span，避免影响图标；优先用px单位，中文推荐-0.5px~1px；注意safari兼容性、中英文混排差异及真机验证。
按钮文字用 letter-spacing 拉开是可行的，但得加在正确位置
直接给 <button></button> 元素设 letter-spacing 多数情况下能生效，但要注意它会作用于整个按钮内容——包括图标、空格、甚至内联 SVG。如果按钮里混用了 <span></span> 或 <i></i>（比如 Font Awesome 图标），间距可能把图标也“撑开”，造成错位。
推荐做法是只包裹纯文字部分：<button><span class="btn-text">提交订单</span></button>
然后对 .btn-text 单独设 letter-spacing，避免副作用。
- 不要在全局
button选择器上设该属性，否则所有按钮统一受影响，含带图标的、小字号的、禁用态的都会异常 - 移动端 Safari 对
button内负值letter-spacing渲染不稳定，尤其font-size 时容易粘连或截断 - 若按钮用了
text-transform: uppercase，先设这个，再设letter-spacing，顺序不影响，但两者叠加后视觉拉伸感更强
letter-spacing 值设多少才合适？中文按钮常见范围是 -0.5px ~ 1px
中文字体本身字宽一致，letter-spacing 的增减效果比英文更“线性”。设 1px 在 16px 字号下约等于每个字多出一个像素空隙，视觉上明显但不松散；设 -0.5px 可微调某些字体（如思源黑体）小字号下的轻微粘连。
别用无单位数值（如 0.1）——它按当前 font-size 计算，而按钮常因 padding 或 line-height 导致实际渲染字号和 CSS 声明不一致，反而失控。
- 优先用
px：稳定、可预测，适合按钮这种尺寸固定的控件 - 慎用
em：如果按钮字体随响应式缩放，0.05em可能更安全，但需实测不同断点下的效果 - 绝对避免
letter-spacing: 5px这类大值：按钮宽度有限，极易溢出或触发换行（哪怕white-space: nowrap也压不住）
为什么有时设了 letter-spacing 按钮文字却没变化？
最常见原因是被其他样式覆盖，或按钮内部结构干扰。打开开发者工具看 computed 样式，确认 letter-spacing 是否真的应用到了文本节点上。
- 父级设置了
font-feature-settings: "kern"或启用了 OpenType 字距（kerning），可能抵消部分letter-spacing效果 - 按钮用了 Web Font 但字体文件本身 kerning 表异常（比如某些免费字体关闭了字距调整），
letter-spacing只能微调，救不了根本 -
<button></button>内嵌了<svg></svg>或<img>，这些非文本元素不受letter-spacing影响，但会占据流式空间，让文字“看起来没动” - 旧版 Safari（iOS 15 及更早）对
button的letter-spacing支持有 bug，需加display: inline-block或transform: translateZ(0)触发硬件加速来绕过
中英文混排按钮怎么避免英文被拉得太开？
同一个 letter-spacing: 1px 应用在“立即购买”和“Buy Now”上，汉字基本均匀拉开，但英文单词里的字母间距变大，导致 “Buy” 看起来像 “B u y”。这不是 bug，是字体度量差异导致的视觉偏差。
拆开控制最稳妥：button:lang(en) { letter-spacing: 0.5px; }
或更精确地：button .lang-en { letter-spacing: 0.4em; }
-
:lang()伪类依赖 HTML 的lang属性，需确保按钮内英文部分有<span lang="en">Buy Now</span> - 不要指望
word-spacing能修中文按钮——它对无空格分隔的中文无效，设了也白设 - 如果按钮文字由 JS 动态注入，记得同步设置
lang属性，否则:lang()不匹配
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
