line-height设太小会导致行间文字重叠
行高不够时，上下两行文字的字形会物理性压在一起，尤其在有下划线、下标或字体带长降部（比如 g、y、p）时特别明显。浏览器不会自动避让，只按line-height数值机械排布。
-
line-height: 1在多数字体下几乎必然重叠，别用 - 中文推荐从
1.5起步，英文可略低（1.4），但需实测——不同字体渲染差异大 - 避免用像素值（如
line-height: 20px），它在字号变化时失效；优先用无单位数值（1.6）或em - 如果父容器用了
display: flex或grid，子文本的line-height可能被忽略，此时要显式给文本容器加align-items: flex-start
letter-spacing对中英文混合排版影响不对称
字母间距拉大时，英文单词内部空隙变宽，但中文每个字是等宽方块，letter-spacing 实际是在字与字之间“硬塞”空白，容易造成断行错乱和两端对齐异常。
- 中文段落慎用
letter-spacing，除非是标题、短标语等可控场景 - 中英文混排时，
letter-spacing: 0.05em对英文较友好，但中文会显得松散；可配合font-feature-settings: "kern"启用字体自带的字距调整，更自然 -
letter-spacing为负值（如-0.02em）能收紧英文，但对中文基本无效，还可能让标点粘连 - 注意：某些字体（如思源黑体）默认关闭了 OpenType 的字距特性，
font-kerning: auto可以打开
line-height和letter-spacing叠加使用时的继承陷阱
这两个属性都**可继承**，但继承行为容易误判：子元素若未显式设置，会继承父级计算后的值，而不是声明值。比如父级设 line-height: 1.6，子元素字体大小变了，实际行高也会跟着变——这常被当成“bug”。
- 嵌套文本（如
里套链接）若字体大小不同，又没重设line-height，就会出现行高突兀收缩或撑开 - 解决办法：对可能改变字号的内联元素，统一加
line-height: 1.6（用无单位值）或line-height: normal -
letter-spacing继承后，子元素再设新值会覆盖，但不会“累加”，这点比line-height简单些 - 用浏览器开发者工具检查 computed 栏里的
line-height值，看它是像素还是比例，能快速定位是否被意外继承
移动端长文阅读场景下的真实取值建议
手机屏幕窄、用户常缩放、系统字体设置多样，固定值极易翻车。真正可用的配置得兼顾可读性与容错性。
- 正文首选：
line-height: 1.6+letter-spacing: 0（中文）或0.01em（英文为主） - 避免用
rem或vh设line-height，它们和字体大小耦合太紧，缩放时易崩 - 如果内容来自 CMS 或用户输入，且无法控制 HTML 结构，用
* { line-height: 1.6 !important }不可靠——更好的方式是给内容容器加line-height并用all: unset重置子元素样式（谨慎使用） - iOS Safari 对
letter-spacing渲染偏弱，Android Chrome 则更敏感，真机测试比模拟器重要得多
行高和字距看着简单，但一旦牵扯到字体加载、用户缩放、多语言混排、动态字号，就全是边界情况。最稳的做法不是调到“看起来顺眼”，而是先锁定最小可读行高和零字距基线，再按需微调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
