letter-spacing 是唯一能直接精准控制字符水平间距的 CSS 属性，但需注意单位选择（小字号用 em、大标题可用 px）、中英文混排应分别设置、慎用负值、避免在表单元素上使用，并关注 WebFont 加载状态与样式覆盖问题。
letter-spacing 是唯一能直接、精准控制字符水平间距的 CSS 属性，但“调整文本间距”不等于“随便设个值”，关键在单位选择、继承控制、中英文差异和浏览器限制——写错单位、忽略 WebFont 加载状态、或在 <input> 上硬套，它就失效。
为什么 letter-spacing 在小字号或移动端“没反应”
不是代码错了，而是渲染被限制或覆盖：
- 父容器设了
white-space: nowrap且宽度不足 → 字符被挤出视口，DevTools 里能看到 computed 值生效，但人眼看不见 - 用了 WebFont，但字体文件未加载完成，浏览器 fallback 到系统字体（如 SimSun），而系统字体 kerning 表缺失 →
letter-spacing只能微调，救不了底子 - 样式被后加载的 CSS 覆盖 → 打开 DevTools 的 Computed 面板，确认
letter-spacing是否 crossed out - 在
<input>或<textarea>上设置 → Safari（尤其 iOS 16–17）对这类表单元素支持极差，Chrome 也仅部分生效，应避免
letter-spacing 该用什么单位才靠谱
固定 px 值在不同设备上会失衡；无单位值（如 0.1）会被解析为 0.1px，多数浏览器舍入为 0；% 不被规范支持，直接忽略：
- 小字号文本（≤14px），比如移动端正文：用
em，例如letter-spacing: 0.03em—— 它随font-size等比缩放，不会在 12px 下过松、16px 下又看不见 - 大标题（≥24px）：可用
px微调，如letter-spacing: 1.5px，但别超2px，否则易撑破容器 - 全局节奏统一场景：用
rem，但必须确保:root { font-size: 16px; }明确定义，否则动态改根字号时会失控
中英文混排时怎么避免“一边太松、一边太紧”
同一个 letter-spacing 值对汉字和拉丁字母的视觉影响差异极大，强行统一只会让设计稿验收翻车：
立即学习“前端免费学习笔记（深入）”；
- 别用
:lang(en)伪类——它依赖 HTML 的lang属性，且对内联英文片段（如按钮里的 “NEW”）常不生效 - 推荐显式包裹：
Contact<span class="lang-en">联系我们</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.01em就可能触发字符粘连，肉眼可见字形碰撞 - 超过
-0.02em后，部分中文字体（如 Noto Sans CJK）会直接丢弃字距调整逻辑，退化为默认 kerning - WebFont 加载未完成时，负值在 fallback 字体（如微软雅黑）上表现更不可控，建议配合
@font-face的font-display: optional或 JS 检测加载状态后再启用
真正难的不是写对一行 letter-spacing，而是判断它在哪种字体、多大字号、什么容器宽度、是否已加载完成的前提下，还能稳定生效——这些细节全藏在 DevTools 的 Computed 面板里，而不是 CSS 文件里。
