letter-spacing 无效通常因被覆盖、继承或元素类型不支持；需检查计算值、提高优先级、避免用于替换元素，并注意与字体字距的冲突。
letter-spacing 设置后没变化？先看是否被重置或覆盖
很多情况下 letter-spacing 看似“无效”，其实是被后续样式覆盖了，比如框架 CSS、重置库（如 Normalize.css）或组件库自带的 letter-spacing: normal。浏览器默认值是 normal，它不等于 0，但视觉上常看不出差别；而一旦父元素设了 letter-spacing，子元素若未显式声明，会继承该值——这反而可能掩盖你的修改。
- 用浏览器开发者工具检查计算值（Computed），确认最终生效的
letter-spacing是多少，而不是只看 Styles 面板里的声明行 - 如果父级有
letter-spacing: 0.1em，子元素又写了letter-spacing: 2px却没生效，大概率是 CSS 优先级不足，加!important临时验证（上线前必须移除） - 某些 UI 库（如 Ant Design、Element Plus）会在
button、input等组件里强制设letter-spacing: normal，需针对性提高选择器权重，例如：button.my-btn { letter-spacing: 0.05em !important; }
letter-spacing 在内联元素和替换元素中表现异常
letter-spacing 只对字符间起作用，对 <img>、<input>、<textarea> 这类替换元素（replaced elements）完全无效；对 <span>、<a> 等内联非替换元素才生效。更隐蔽的问题是：当文本被 display: flex 或 display: grid 包裹时，字符间距可能因盒模型行为“被压缩”或“断开”。
- 不要对
<input type="text">直接设letter-spacing——它不会影响输入框内文字的字距，只能作用于其伪元素::placeholder（且需单独设置） - 若在
flex容器中给文字加letter-spacing，但发现空隙错位，可能是子项被设了white-space: nowrap或字体本身有 OpenType 特性干扰，可尝试加font-feature-settings: "kern" off;关闭自动字距调整 - 中文排版中，
letter-spacing对汉字效果有限（汉字本身是方块字，无传统“字距”概念），若想拉开中文字间距，实际更依赖word-spacing或使用text-indent+ 伪元素模拟
letter-spacing 继承机制与常见误用场景
letter-spacing 是可继承属性，但继承的是计算后的值，不是声明值。例如父元素设 letter-spacing: 0.1em，子元素字体大小为父级 0.8 倍，则子元素实际继承的是 0.1em × 父级 font-size，再按自身 font-size 换算——这容易导致预期外的缩放偏差。
- 避免在
body或全局* {}中设letter-spacing，尤其不要设负值（如-0.02em），否则所有内联文本都会被挤压，包括按钮文字、链接、表单标签，极易引发可访问性问题 - 若需统一控制标题字距，推荐用具体选择器，如：
h1, h2, h3 { letter-spacing: 0.02em; }而非h1 * { letter-spacing: ... }—— 后者会让所有后代内联元素（包括<span>、<em>）重复叠加 - 使用 rem/em 单位时注意：如果父容器用了
font-size: 0（常见于清除 inline 元素间隙的 hack），则letter-spacing: 0.1em实际变成0.1 × 0 = 0px，此时必须用px或显式重置父级font-size
letter-spacing 与 font-kerning、font-feature-settings 的冲突
现代字体（尤其是可变字体或启用 OpenType 的字体）自带字距调整（kerning）逻辑，它和 letter-spacing 是两套机制：前者是字体设计师预设的成对字符间距修正（如 “AV”、“To”），后者是全局等距拉伸。当两者共存时，浏览器默认优先应用字体 kerning，可能“吃掉”你设的 letter-spacing 效果。
立即学习“前端免费学习笔记（深入）”；
- 若要强制让
letter-spacing生效，可关闭字体自带字距：font-kerning: none;
或更彻底地：font-feature-settings: "kern" 0;
- 但注意：关掉 kerning 后，“WA”、“LY” 等组合会显得松散难读，尤其英文长段落不建议全局关闭
- Chrome 和 Safari 对
font-feature-settings支持较好，Firefox 需加前缀-moz-font-feature-settings，旧版 Edge 可能完全忽略
实际调试时，最可靠的路径是：打开 DevTools → 找到对应元素 → 切到 Computed 标签页 → 搜索 letter-spacing → 看它是否被标记为“已继承”或“被覆盖”。很多时候问题不在写法，而在没意识到它已经被某处隐式继承或重置了。
