letter-spacing是唯一能精准控制字符水平间距的CSS属性，但需注意单位选择（小字号用em、大标题可用px）、避免在表单元素使用、混排时需分别包裹中英文并单独设置、慎用负值以防粘连或错位。
letter-spacing 是唯一能直接、精准控制字符间水平空隙的 CSS 属性，但“调间距”不是设个值就完事——单位选错、用在表单上、混排没拆开，它就等于没写。
为什么设了 letter-spacing 却没反应
不是语法错，而是被渲染机制或样式覆盖卡住了：
- 父容器用了
white-space: nowrap且宽度不够 → 字符被挤出视口，DevTools 里letter-spacing值明明生效，人眼却看不到 - 用了 WebFont，但字体文件没加载完，浏览器 fallback 到 SimSun 等系统字体 → 这些字体 kerning 表缺失，
letter-spacing只能微调，救不了底子 - 在
<input>或<textarea>上硬套 → Safari（尤其 iOS 16–17）基本不支持，Chrome 也仅部分生效，应彻底避免 - 后加载的 CSS 覆盖了你的规则 → 打开 DevTools 的 Computed 面板，确认
letter-spacing是否被划掉
letter-spacing 该用什么单位才靠谱
单位选错，小字号下“没反应”，大标题又撑破容器：
- 小字号文本（≤14px），比如移动端正文：用
em，例如letter-spacing: 0.03em—— 它随font-size等比缩放，不会在 12px 下过松、16px 下又看不见 - 大标题（≥24px）：可用
px微调，如letter-spacing: 1.5px，但别超 2px，否则易撑破容器 - 禁用百分比（
%）：规范不支持，浏览器直接忽略 - 慎用无单位数值（如
0.1）：它会被解析为0.1px，多数浏览器舍入为 0，几乎无效
中英文混排时怎么避免一边太松、一边太紧
同一个 letter-spacing 值对汉字和拉丁字母的视觉影响差异极大，强行统一只会让设计稿验收翻车：
立即学习“前端免费学习笔记（深入）”；
- 别依赖
:lang(en)—— 它靠 HTML 的lang属性，对按钮里夹的 “NEW” 这类内联英文常不生效 - 显式包裹更稳妥：比如
Contact<span class="lang-zh">联系我们</span>，再分别设.lang-en { letter-spacing: 0.05em; }和.lang-zh { letter-spacing: 0.02em; } - 注意继承性：
section { letter-spacing: 0.02em; }会让内部所有<strong>、<i>也带这个值，需主动重置：section strong { letter-spacing: normal; }
负值收紧中文时最容易踩的坑
中文慎用负值，不是不能用，而是临界点极低：
- 12–14px 小字号下，
letter-spacing: -0.5px就可能开始粘连；-1px 在多数设备上已不可读 - 移动端 Safari 对小字号 + 负
letter-spacing渲染不稳定，必须真机测试，模拟器看不出问题 - 别在全局
body上设负值 —— 数字、英文单词会异常断开（比如 “123” 变成 “1 2 3”） - 图标字体（如 Font Awesome 的
<i>）也会被负值影响，导致图标错位或变形
真正难调的从来不是“怎么设”，而是“在哪设、对谁设、设多少才不翻车”——尤其是混排场景下，一个没包裹的英文单词就能让整段中文间距失控。
