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继承该line-height，行高反而比字号还大 -
line-height: 100%看似“贴着字”，实际等于font-size，而汉字字身高度通常只占字号的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（比如通过JS切换class）时，首次渲染常出现闪动：先按默认间距显示，再跳变成目标间距。这不是bug，是WebKit对字符度量（glyph metrics）的懒加载策略。
绕过方式有限，但有效：
- 给元素加
transform: translateZ(0)强制GPU加速，能缓解大部分机型的跳变 - 避免在
:hover或@media查询里突变letter-spacing，改用transition: letter-spacing 0.2s软化过渡 - 如果必须零延迟，提前在CSS里定义好两套类，用
display或visibility切换，而非实时改letter-spacing
这件事没有银弹，尤其是中文字体多、字重多的项目，每个组合都得实机测一遍。
