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