CSS如何设置文字的字间距与行高_利用letter-spacing与line-height属性

设置letter-spacing为负值容易导致文字重叠，中文场景下建议不超过-0.05em，英文则不超过-0.1em；line-height属性应优先采用无单位数值（例如1.5），避免使用px或%导致嵌套元素行高失控；当二者共同使用时，line-height决定着行高，而字间距仅影响单行内文字的宽度。

免费影视、动漫、音乐、游戏、小说资源长期稳定更新！ 👉 点此立即查看 👈

letter-spacing设负值时文字会重叠，但不是所有场景都适合

字间距属性 letter-spacing 的默认值是 normal。当你赋予它正值时，文字会被拉宽；给负值，则会向内压缩。但是，负值给得太“狠”——比如 letter-spacing: -0.2em——中文就很可能粘连成一团，英文中的连字（像 “fi”、“fl”）也可能被意外截断。这里还有个浏览器差异：Webkit内核（比如Chrome）对负值的渲染通常比Firefox更“激进”，同样的数值在不同浏览器里看起来可能完全是两个样子。

那么，实际工作中该怎么把握呢？给你几条建议：

• 中文排版要格外小心负值，控制在 -0.05em 以内比较安全；英文可以放宽到 -0.1em，但务必人工检查首尾字母有没有被裁切。
• 尽量避免在 button 或 input 这类有默认字体缩放逻辑的控件上直接设置 letter-spacing，很容易触发iOS Safari的自动缩放干预，搞乱你的布局。
• 在做响应式设计时，别用固定像素值（比如 letter-spacing: -1px），改用 em 或 rem。否则，在小屏幕下挤压效应会成倍放大，效果惨不忍睹。

line-height设为无单位数值最稳妥，别用px或%

把 line-height 设成诸如 1.5 这样的无单位数字，是最聪明的做法。它会根据当前元素的字体大小动态计算行高，子元素继承时，也是基于自身的字号重新计算。反之，如果写成 line-height: 24px（绝对值）或 line-height: 150%（相对父元素），子元素会直接继承这个计算结果，导致嵌套的文本行高完全失控。

你可以想象这么一个典型的错误场景：

立即学习“前端免费学习笔记（深入）”；

• 标题用了 font-size: 2rem 配合 line-height: 24px，而正文的 font-size: 1rem 直接继承了那 24px 的行高，最终行高比字号本身还大，版面显得极其松散。
• 以为 line-height: 100% 能让文字“紧紧贴合”？这其实等于 font-size 的100%。但汉字字身高度通常只占字号的70%到80%，所以视觉上依然显得拥挤不堪。

这里有几个经验值供参考：正文行高建议在 1.5 到 1.6 之间；标题可以紧凑些，用 1.2 到 1.3；如果是超小字号的场景（比如12px的图标辅助文字），行高至少设为 1.3，才能有效防止上下行文字重叠。

letter-spacing和line-height同时使用时，line-height优先级更高

这是个关键原则：当 letter-spacing 把文字横向拉伸之后，行框（line box）的高度仍然由 line-height 一锤定音。换句话说，字间距只管一行之内文字的宽度，而行高才决定了行与行之间的“呼吸空间”。如果 line-height 太小，哪怕你把字间距调得再宽，也救不回那局促的行间距离。

看看这些容易踩坑的地方：

• 导航菜单的文字加了 letter-spacing: 0.1em 显得很精致，但 line-height 却还是默认的 1。结果鼠标悬停时，下划线几乎紧贴着文字底部，视觉效果非常割裂。
• 卡片标题用了大字号配合大字间距来营造气势，却忘了同步调高 line-height，导致文字上下方的内边距（padding）被“顶穿”，内容溢出容器。

解决方法其实很简单：务必先确定好 line-height，保障基本的行间韵律，再去微调 letter-spacing 来优化字与字的节奏感。这个顺序绝对不能颠倒。

移动端iOS Safari对letter-spacing有渲染延迟

在 iOS 的 Safari 浏览器里，动态修改 letter-spacing（例如通过 Ja vaScript 切换 CSS 类名）时，经常会遇到一个烦人的闪动问题：页面会先用默认间距渲染文字，然后才突然“跳”成你设定的间距。这并非 bug，而是 WebKit 引擎对字符度量（glyph metrics）采取的一种懒加载策略。

虽然无法根治，但有一些行之有效的绕行方法：

• 给相关元素加上 transform: translateZ(0) 来强制开启 GPU 加速，这能缓解大部分机型上的跳变&现象。
• 尽量避免在 :hover 伪类或 @media 媒体查询里让 letter-spacing 发生突变。改用 transition: letter-spacing 0.2s 添加一个短暂的过渡效果，能让变化柔和许多。
• 如果项目要求零延迟，更稳妥的办法是：提前在 CSS 里定义好两套完整的样式类，通过切换 display 或 visibility 来控制显示，而不是去实时修改 letter-spacing 属性。

最后需要提醒的是，这件事没有一劳永逸的解决方案。尤其是当中文字体繁多、字重复杂的项目，几乎每一种字体和属性的组合，都需要在真实设备上测试一遍才能放心。