letter-spacing 是精准控制标题字符间距的关键属性，需依字体、字号、场景选择合理值：英文大写加0.05–0.1em，中文一般normal或微调0.02–0.04em，细体英文字体可+0.03em，移动端推荐em单位并注意标点、继承与iOS闪动问题。
直接用 letter-spacing 就能精准控制标题文字的字符间距感，关键不在“能不能调”，而在于“调多少、怎么调才自然”。它不改变字体本身，只在字符框之间插入或压缩空白，对视觉节奏影响明显。
标题常用数值参考与设计逻辑
不同场景下推荐的取值有明确依据：
- 英文大写标题（如
TEXT-TRANSFORM: UPPERCASE）：加 0.05em–0.1em，避免字母挤在一起；全大写本身字形宽度小，不加间距易显局促 - 中文标题（如黑体/思源黑体）：一般保持 normal，若需强调可微调至 0.02em–0.04em，超过 0.05em 容易显得松散
- 细体/窄体英文字体（如 Helvetica Light）：常需 +1px 或 +0.03em 补偿视觉密度过高
- 移动端小字号标题（≤18px）：建议用 em 单位，例如
letter-spacing: 0.03em，随字号缩放更稳定
避免踩坑的关键细节
看似简单的一个属性，实际容易因忽略上下文出问题：
- 负值慎用：中文设
-0.05em已接近临界，再低易导致笔画粘连；英文也不建议低于-0.1em，尤其注意fi、fl这类连字可能被截断 - 标点和空格也受控：逗号、句号、空格都会被统一拉伸或压缩，全角中文标点影响更明显，调整后务必检查标点位置是否突兀
- 继承性要留意：若父容器设了
letter-spacing，子元素（如<span></span>内强调词）会继承，必要时主动重置为normal - iOS Safari 动态切换有闪动：JS 切换 class 触发 letter-spacing 变化时，首次渲染可能先按默认值显示，再跳变，建议搭配
transition缓解
响应式与多端适配建议
固定像素值（如 2px）在不同设备上效果不稳定，更推荐：
立即学习“前端免费学习笔记（深入）”；
- 用 em 单位：基于当前元素
font-size计算，缩放自适应。例如h1 { font-size: 2rem; letter-spacing: 0.04em; } - 媒体查询中微调：小屏下字号缩小，间距可略增（如从
0.03em改为0.04em），提升小字可读性 - 避免与
line-height冲突：字间距只影响单行内宽度，不影响行高。标题若加了较大 letter-spacing，记得同步检查line-height是否足够，防止文字“顶破”容器上下 padding
它不是装饰性技巧，而是排版呼吸感的基础调节器——数值小，作用实，调得准，标题立刻更稳、更透气。
