中英文混排时letter-spacing需分治：中文设0.02em–0.06em，英文可略大；共用同一值会导致中文发虚、英文粘连，须用类名隔离并优先选用em单位。
letter-spacing 能调中英文，但不能“一值通吃”——中文需 0.02em–0.06em 微调，英文可略大；混排时统一设值必然一边松、一边紧，必须分治。
为什么中英文用同一个 letter-spacing 值会翻车
中文字是方块字，视觉重心稳、笔画密度高，letter-spacing: 0.1em 在 14px 下就容易显“断层”；英文字母本身宽高比差异大（比如 A 和 i），且浏览器默认依赖字距表（kerning），对间距变化更敏感。强行共用一个值，结果通常是：中文看着发虚，英文却还嫌不够开。
常见错误现象：nav a { letter-spacing: 2px; } —— 中文菜单项“首页”“关于”之间空得奇怪，而英文“Home”“About”字母却仍粘连。
- 中英文混排时，
lang伪类不可靠，HTML 里没标lang="en"的内联英文（如按钮里的NEW）根本不会命中 - 继承性会让子元素（比如
或）也带上父级的letter-spacing，导致强调文字反而失重 - WebFont 加载未完成时，系统字体 fallback 渲染下
letter-spacing效果大幅打折，尤其对中文字体
中英文分别控制的实操方案
最稳的方式是显式包裹 + 类名隔离，不依赖语言属性，也不污染全局。
HTML 示例： 联系我们 Contact Us
- 给中文容器设基础值：
.lang-zh { letter-spacing: 0.03em; } - 给英文容器单独放大：
.lang-en { letter-spacing: 0.06em; } - 若内部有强调标签，主动重置：
.lang-en strong { letter-spacing: normal; } - 避免在
或上使用——Safari（尤其 iOS 16–17）基本忽略，Chrome 表现也不一致
单位选 em 而不是 px 的真实原因
不是因为“听起来更专业”，而是 px 在响应式场景下会彻底失效：14px 字号下设 letter-spacing: 1px 是明显疏松，换到 28px 标题里就只剩 3.5% 的相对空隙，肉眼几乎不可见。
em 是唯一能随 font-size 等比缩放的单位，它让“疏密感”保持稳定：
- 正文（14–16px）：
letter-spacing: 0.04em≈ 0.56–0.64px，刚好呼吸感 - 标题（32px）：
letter-spacing: 0.04em≈ 1.28px，仍在线条比例安全区 - 千万别用
%——CSS 规范不支持，浏览器直接忽略 -
rem可用，但前提是:root的font-size不被 JS 动态改写，否则间距会意外跳变
负值收紧中文？先看这三条红线
中文慎用负值，不是不能，而是临界点极低。多数失败案例都栽在“以为 -1px 就是微微收紧”，实际已越过安全线。
- 安全上限：≤
-0.03em（对应 14px 时约 -0.42px），再低极易造成“口”“田”“目”类字笔画重叠 - 必须搭配
line-height: 1.6以上，否则上下行文字视觉粘连，尤其在移动端小屏上 - 绝对不要对段落级中文（如
p、article）设负值——屏幕阅读器播报逻辑不变，但视觉已无法分辨“言”和“论”是否独立成字 - 想压缩标题宽度？优先试
font-size: calc(1.2rem - 2px)或启用text-rendering: optimizeLegibility，比硬塞负letter-spacing更可控
真正难的不是写对那行 letter-spacing，而是判断它该加在哪一层、对谁生效、在什么设备上不被 fallback 吞掉——这些细节藏在 DevTools 的 Computed 面板里，不在设计稿标注里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
