高级排版核心是line-height与letter-spacing的精准控制：line-height须设于块级容器，用无单位数值（如1.5～1.75）；letter-spacing慎用于中文正文，仅适用于按钮、短标题等特定场景。
显高级不是靠字体多贵、颜色多炫，而是文字呼吸感够不够——行高松紧得当、字间不粘不散、段落节奏清晰。核心就两条：line-height 控行距，letter-spacing 控字隙，其余都是干扰项。
line-height 必须设在块级容器上，别喂给 span
很多人想“微调某几个字的行距”，于是给 span 加 line-height: 1.8，结果毫无反应。因为 line-height 只对生成行框（line box）的元素起效，span 是内联元素，不创建新行框，只影响自身在当前行内的垂直对齐位置。
- ✅ 正确做法：把
line-height设在p、div、li这类包裹多行文本的块级容器上 - ❌ 错误做法：给
span或a单独设line-height企图撑开段落 - ⚠️ 特殊情况：标题里嵌了
sup或small，父h2设了line-height: 1.3后小字被压扁——这时要额外加vertical-align: -0.15em微调基线
用无单位数字设 line-height，别碰 px 和 %
line-height: 1.6 是安全区；line-height: 24px 或 line-height: 160% 在响应式场景下极易翻车。前者固定像素，子元素字体变大时行高卡死不动；后者百分比继承的是计算后的绝对值，嵌套层级一深，行高就塌缩或爆炸。
- 中文正文推荐
line-height: 1.5～line-height: 1.75，思源黑体/霞鹜文楷这类中宫宽松的字体可略低（1.45） - 标题建议
line-height: 1.1～line-height: 1.3，避免头重脚轻；但font-size小于 20px 时别低于 1.2，否则字挤成团 - 全局统一入口写在
body：body { line-height: 1.55; }，90% 的文本会自然继承，省去重复声明
letter-spacing 要慎用，中文默认不生效的场景比你想象的多
letter-spacing 确实能拉开汉字间距，但它不是“万能字距开关”。浏览器对中文的字距处理依赖字体本身的 GPOS/GSUB 表，很多免费中文字体根本不带这些特性，letter-spacing: 1px 加上去，可能只让标点或英文单词动了，汉字纹丝不动。
- ✅ 适合场景：按钮文字（如「登 录」中间加空格）、短标题、Logo 文字、等宽英文代码片段
- ❌ 不适合场景：正文段落、含数字/英文混排的说明文字（
word-spacing对中文基本无效，别试） - ⚠️ 风险点：设负值（如
-0.5px）在小字号（12–14px）下极易导致汉字粘连，肉眼难辨；移动端高 DPR 屏幕上更明显
真正拉开档次的细节，往往藏在 line-height 和 font-size 的比例关系里——比如 font-size: 16px 搭 line-height: 1.625（即 26px），比生硬的 1.6 更耐看；而这个 0.025 的微调，是多数人忽略、但设计师反复打磨过的呼吸间隙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
