加 letter-spacing 无效主因是被覆盖或渲染条件不满足：如 white-space: nowrap 挤出视口、webfont 字距异常、后加载 css 覆盖、input/textarea 不支持等。
直接加 letter-spacing 就能松开过紧的文字，但值设错、单位用错、场景误配，反而会让文字更难读或在真机上“消失”。
为什么加了 letter-spacing 却没变化
不是属性失效，而是它被覆盖或渲染条件不满足：
- 父元素设置了
white-space: nowrap且容器宽度不足 → 文字被挤出视口，DevTools 里看 computed 值是对的，但人眼看不到 - 用了 WebFont，但字体本身
font-kerning关闭或内置字距异常 →letter-spacing只能微调，救不了底子 - 样式被后加载的 CSS 覆盖 → 检查 DevTools 的 Computed 面板，确认
letter-spacing没被划掉 - 写在
<input>或<textarea></textarea>上 → 多数浏览器（尤其旧版 Safari）不支持，应避免
letter-spacing 的值怎么设才不翻车
数值大小必须匹配字体、字号和使用场景：
- 英文大写标题（如
text-transform: uppercase）：加0.05em–0.1em，避免字母视觉粘连 - 中文标题（黑体/思源黑体等）：一般保持
normal；若需强调，只用0.02em–0.04em，超过0.05em易显松散 - 细体英文字体（如 Helvetica Light）：可加
0.03em或1px补偿视觉密度过高 - 移动端小字号（≤18px）：必须用
em单位，例如letter-spacing: 0.03em，否则像素值在高 DPR 屏上失准
中英文混排时怎么避免“一边松、一边紧”
同一 letter-spacing 值对汉字和拉丁字母的视觉影响差异极大，不能一锅炖：
- 拆开控制：给英文内容加 class，如
span.lang-en { letter-spacing: 0.05em; }，中文用span.lang-zh { letter-spacing: 0.02em; } - 别依赖
word-spacing分隔中文词 —— 中文没空格，它基本无效 - 标点也受控：全角中文标点（，。！）会被统一拉伸，调整后务必检查是否突兀
- 继承性要重置：父级设了
letter-spacing，子元素（如内嵌strong）会继承，必要时主动写letter-spacing: normal
负值收紧的三个高危信号
中文慎用负值，英文也有限度：
- 中文小字号（12–14px）下设
-0.5px，iOS Safari 可能直接四舍五入为 0，而 Android Chrome 却真·收紧，导致跨端不一致 - 同一负值在 Arial 和 Inter 下表现悬殊：前者字宽窄，
-0.03em就可能让“设计”笔画粘连；后者字宽大，同样值反而刚好 - hover 动画里加
letter-spacing: -0.03em是高危操作，iPhone 上容易把 CONTACT 渲染成 CO NTACT 或 CON TACT
真正难调的从来不是写上 letter-spacing，而是它在不同字体、不同字号、不同浏览器下的渲染一致性——尤其是中文字体在 iOS Safari 和 Android Chrome 上的差异，查文档不如开真机多测几遍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
