letter-spacing 设了没反应的主因是中文字体默认字距为0且缺乏OpenType字距表，导致机械加空不显效；需确认font-family、避免inline-block/transform干扰、慎用负值、配合font-kerning与text-rendering优化，并用clamp()响应式适配。
letter-spacing 为什么设了没反应
常见现象是写了 letter-spacing: 2px，但中文字体看起来完全没变化，甚至英文也不明显。根本原因不是属性失效，而是浏览器对不同字体的字距渲染策略差异大——尤其中文默认字距为 0，且多数中文字体本身不带 OpenType 字距表（kerning table），letter-spacing 只是机械地在每个字符“视觉边界”后加空白，而中文字形常有外扩笔画，导致加了也像没加。
- 优先确认元素是否设置了
font-family，用系统默认中文字体（如"PingFang SC"、"Microsoft YaHei"）比自定义 WebFont 更容易看到效果 - 避免对
display: inline-block或含transform的文字设letter-spacing，部分浏览器会跳过重排导致失效 - 如果用在按钮或标题里，记得同步检查
white-space: nowrap是否意外截断了视觉间距表现
letter-spacing 负值的危险行为
负值能让文字“挤”得更紧凑，但极易引发可访问性与渲染问题：屏幕阅读器仍按原字符顺序播报，而视觉上字母重叠可能让视力障碍用户无法识别；更实际的是，Chrome 和 Safari 在 letter-spacing: -1px 以下时，某些字体（如 "Helvetica Neue"）会出现字符裁切或模糊。
- 安全负值范围建议控制在
-0.5px到0之间，超出需实机多端验证 - 绝对不要对中文段落设负值——汉字结构复杂，轻微重叠就会造成误读（比如「言」和「论」叠在一起像「讠+仑」）
- 若目标是压缩标题宽度，优先考虑
font-size微调或使用text-rendering: optimizeLegibility，而非硬塞负letter-spacing
和 font-kerning、text-rendering 的关系
letter-spacing 是强制统一插空，而 font-kerning 是启用字体内置的字偶距（kerning）数据，两者逻辑完全不同。比如 "AV" 这样的组合，开启 font-kerning: auto 会让 A 和 V 自动靠近，但 letter-spacing 会对所有相邻字符一视同仁。
- 现代项目建议同时写：
font-kerning: auto; text-rendering: optimizeLegibility;，再按需叠加letter-spacing -
text-rendering: optimizeLegibility在 Firefox/Chrome 中会自动启用 OpenType 特性，对英文标题提升明显，但对中文基本无影响 - 注意 Safari 对
font-kerning支持较晚（iOS 15+ 才稳定），旧版本回退到letter-spacing时需预留视觉容差
响应式场景下的 letter-spacing 适配
字号缩小时，固定 letter-spacing: 2px 会显得过于稀疏；字号放大时，同一像素值又可能让文字发虚。纯用 em 或 rem 单位也不够——因为它是相对于当前 font-size 计算，而人眼对字距的敏感度并非线性变化。
- 推荐用
clamp()组合：letter-spacing: clamp(0.02em, 0.04em, 0.06em);，在小屏收紧、大屏舒展 - 避免在
@media中为不同断点写死像素值，比如max-width: 768px下设letter-spacing: 1px，容易和父级缩放冲突 - 如果用 CSS 自定义属性做主题控制，把
letter-spacing和font-size挂钩比单独暴露一个变量更可靠
真正难的不是调出某个数值，而是判断这个间距到底服务于阅读节奏，还是纯粹为了视觉“精致感”。后者往往在高 DPI 屏幕或缩放 125% 时立刻露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
