letter-spacing 是唯一能直接拉开中文字符间距的 CSS 属性，但需配合字号、单位、继承控制和字体渲染环境精密调试；设错 0.01em 就可能导致笔画粘连，尤其在 Firefox 或低 DPI 屏上明显。
letter-spacing 是唯一能直接拉开中文字符间距的 CSS 属性，但它不是“加点空就行”的开关，而是必须配合字号、单位、继承控制和字体渲染环境一起调的精密参数；设错 0.01em 就可能让「人」「了」笔画粘连，尤其在 Firefox 或低 DPI 屏上立刻可见。
为什么中文设了 letter-spacing 却没反应
不是代码失效，而是中文字体默认字距为 0 且多数不带 OpenType 字距表，letter-spacing 只是机械地在每个汉字右边缘插一段空白——如果字体本身笔画外扩（如「言」「青」），这段空就“藏”在笔画里，人眼看不见。
- 先确认
font-family是否生效：用系统字体如"PingFang SC"或"Microsoft YaHei"比 WebFont 更容易观察到变化 - 检查是否被
white-space: nowrap截断：宽度不足时，加出来的空被挤出视口，DevTools 里Computed显示值正常，但视觉无感 - 避开
display: inline-block或含transform的元素：部分浏览器会跳过重排，导致间距不触发重绘 - 别在
或上硬套：iOS Safari 对表单元素支持极差，Chrome 也仅部分生效
letter-spacing 值该用 em，别用 px 或 rem
em 是当前元素 font-size 的相对值，14px 下 0.03em = 0.42px，20px 下 = 0.6px，随字号自然缩放；px 在用户开启系统大字体或页面缩放时完全卡死；rem 依赖 :root 字号，暗色模式或 JS 动态改根字号时，所有汉字间距会突变。
- 小字号中文（≤14px，如移动端正文）：用
letter-spacing: 0.03em—— 太小（如 0.01em）舍入后常为 0，太大（如 0.05em）撑开「的」「一」等收笔紧凑字 - 大标题（≥24px）：可用
px微调，如letter-spacing: 1.2px，但别超 2px，否则易撑破容器 - 全角标点（如「，」「。」）也会被拉远：若出现「标题，」中间空得突兀，需单独处理，例如用
.punct { letter-spacing: 0; }包裹标点
如何避免继承污染和中英文混排失衡
letter-spacing 具有继承性，父元素设了，子元素里的 、英文按钮文案（如「NEW」）甚至图标字体都会被拉宽，必须显式重置。
- 标题整体设
h1 { letter-spacing: 0.02em; }后，必须写h1 strong, h1 em { letter-spacing: normal; } - 中英文混排时，别依赖
:lang(en)：它对内联英文片段常不生效；推荐显式包裹：Contact联系我们，再分别设.lang-en { letter-spacing: 0.05em; }和.lang-zh { letter-spacing: 0.02em; } - 若用 WebFont，优先启用
font-kerning: auto;和text-rendering: optimizeLegibility;，让字体自带字距表生效，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; } }，比全局固定值更稳 - 负值慎用：中文段落设
letter-spacing: -0.5px极易导致「口」「田」类字笔画重叠，安全上限建议 ≤-0.03em，且必须搭配line-height: 1.6以上防上下行粘连
最常被忽略的是：你看到的“没效果”，往往不是属性没生效，而是字体本身缺乏字距数据 + 单位选错 + 继承未清理三者叠加的结果；调的时候，永远以真实设备上的小字号渲染为准，别信设计稿里的放大预览。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
