letter-spacing 作用于所有字符（含空格、标点、emoji），中英文混排时易致间距失控；word-spacing 仅影响空格类分隔符，对中文无效；调中文词距需分词+span控制或 intl.segmenter，无原生css支持。
letter-spacing 会让所有字母“均匀撑开”，包括空格和标点
很多人以为 letter-spacing 只影响英文字母，实际它作用于每个字符——空格、连字符、中文标点甚至 emoji 都会被等距拉开。这在中英文混排时特别容易翻车，比如「Hello 世界」加了 letter-spacing: 2px，中间那个空格也会变宽，导致单词间距失控。
实操建议：
- 纯英文标题或 logo 场景下可放心用，但值别超过
1px（视觉上已明显，再大易碎） - 中英文混排时，优先考虑用
font-feature-settings: "kern"或调整字体本身的字距对（kerning），而非暴力拉letter-spacing - 若必须用，记得重置空格行为：
span.word { letter-spacing: normal; }包住单词级内容
word-spacing 只动空格，但“空格”不只指空格键
word-spacing 看似安全，其实它的“词”定义很窄：只影响 Unicode 中被归类为 separator, space 的字符（如 U+0020 空格、U+00A0 不间断空格），而中文词之间没有这种分隔符，所以对中文完全无效；英文里也只拉宽单词间的空格，不碰连字符（well-known 中的 - 不会变宽）。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 给中文段落设
word-spacing: 4px→ 毫无反应 - 给
font-family: "Helvetica", sans-serif加word-spacing→ 效果比"PingFang SC"更弱，因西文字体对空格渲染更“刚性” - 配合
text-align: justify使用 → 浏览器可能忽略word-spacing，转而用更底层的 justification 算法
Chrome 和 Safari 对 letter-spacing 的像素处理不一致
Chrome（基于 Blink）把 letter-spacing 当作“额外添加的间隙”，直接叠加到字形边界外；Safari（WebKit）则倾向于“重分配字符盒宽度”，尤其在小字号（12px 以下）或使用 transform: scale() 缩放时，会出现 Safari 多撑出半像素、Chrome 却没变化的情况。
性能与兼容性影响：
- 设
letter-spacing: 0.05em比0.1px更稳妥，em 单位在缩放/响应式下更可控 - 避免在动画中频繁修改
letter-spacing（触发重排 + 重绘），改用transform: translateX()模拟字距动效 - Firefox 对负值
letter-spacing渲染最保守，-0.5px可能被截断为0，测试时务必真机检查
真正要调“中文词距”，得绕开 CSS 原生属性
CSS 没有 character-spacing 或 chinese-word-spacing 这种东西。所谓“中文词距”，本质是排版语义问题，浏览器根本不识别“词”。强行用 letter-spacing 拉中文，结果是每个汉字都被撑开，像「我 们 都 爱 写 代 码」——这不是词距，是字距爆炸。
可行路径只有两条：
- 服务端或构建时用分词库（如 jieba）插入
<span class="word">我们</span><span class="word">都爱</span>，再对.word控制margin-right - 前端用
Intl.Segmenter（Chrome 86+ / Safari 15.4+）动态切分，配合display: inline-block+margin模拟，但注意 Safari 对 CJK 的 segment type 支持仍不稳定
别指望一个 CSS 属性解决中文排版——它从设计之初就没打算管这件事。字距、词距、行距，在中文里从来不是独立变量，而是互相咬合的排版链。
