汉字间距过近时，letter-spacing不是快捷键而是精密参数；设错0.01em即致“人”“了”笔画粘连，尤其在firefox或低dpi屏上立现。
直接说结论：汉字间距过近时，letter-spacing 不是“加点空就行”的快捷键，而是必须配合字号、单位、继承控制和渲染环境一起调的精密参数；设错 0.01em 就可能让“人”和“了”笔画粘连，尤其在 Firefox 或低 DPI 屏上立刻可见。
为什么中文加 letter-spacing 后反而更糊？
因为 letter-spacing 对中文是“机械插空”——它不管字形结构，只在每个汉字右边缘统一塞一段空白。问题出在：
- 小字号（≤16px）下，汉字本身笔画密度高，
letter-spacing: 0.02em在 14px 下实际只有 0.28px，浏览器舍入后常为 0，看似没生效；但设成0.03em又可能撑开“的”“一”等收笔紧凑的字，造成视觉断裂 - 全角标点（如“，”“。”）同步被拉远，导致“标题，”中间空得突兀，破坏语义节奏
- 父级设置了
letter-spacing: 0.02em，子元素如<strong></strong>或<span></span>会继承并叠加，结果重点文字被撑得松散
letter-spacing 值该用什么单位？
必须用 em，别用 px 或 rem：
-
em是当前元素font-size的相对值，14px 下0.03em= 0.42px，20px 下 = 0.6px，随字号自然缩放，避免小屏挤、大屏飘 -
px在用户开启系统大字体或页面缩放时完全卡死，文字放大但间距不变，视觉密度失衡 -
rem依赖:root字号，暗色模式切换或 JS 动态改根字号时，所有汉字间距会突变，iOS Safari 尤其明显
怎么避免继承污染和标点错位？
关键不是“设一次”，而是“精准覆盖”：
- 对标题整体设
h1 { letter-spacing: 0.02em; }后，必须显式重置内部强调元素：h1 strong, h1 em { letter-spacing: normal; } - 全角标点需单独处理：用伪元素或包裹标签隔离，例如
<span class="punct">，</span>，再设.punct { letter-spacing: 0; } - 若用 WebFont，优先启用
font-kerning: normal，让字体自带字距表生效，letter-spacing只作 ±0.01em 级别的轻量补偿
移动端小字号标题怎么调才不闪不崩？
iOS Safari 对 letter-spacing 动态切换有首次渲染跳变——JS 切 class 后先闪默认值，再跳目标值。这不是 bug，是渲染管线特性，解决办法很具体：
- 加过渡但只交由该属性：
transition: letter-spacing 0.2s ease;，千万别写transition: all - 媒体查询里微调：比如
@media (max-width: 480px) { h1 { letter-spacing: 0.04em; } }，比全局固定值更稳 - 检查是否被覆盖：打开 DevTools 的 Computed 面板，确认
letter-spacing没被 cross out；常见干扰源是 WebFont 加载前 fallback 到 SimSun，而 SimSun 没 kern 表，letter-spacing效果极弱
真正难的不是“加多少”，而是判断当前渲染上下文：字号多大、用的什么字体、有没有 WebFont 加载延迟、子元素是否继承、标点是否参与位移——漏掉其中任一环，调出来的“呼吸感”都会变成“窒息感”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
