应使用无单位数值定义行高变量（如--text-body-line-height: 1.75）、em/rem单位定义字距变量，并按文本类型分层设置，配合clamp()与媒体查询实现响应式、可访问的排版。
直接改 --text-body-line-height 和 --text-letter-spacing 两个变量，比全局搜 line-height 或硬写像素值靠谱十倍。
为什么 line-height 必须用无单位数值配合变量
写成 line-height: 24px 或 line-height: 170%，在响应式场景下等于自废武功：字体大小一变，行高就卡死，小屏段落文字容易重叠，大屏则显得空洞。浏览器没法按新字号重新计算。
正确做法是让变量存倍数，交由渲染引擎动态算：
:root {
--text-body-line-height: 1.75;
--text-title-line-height: 1.2;
}
article p {
line-height: var(--text-body-line-height);
}
h1 {
line-height: var(--text-title-line-height);
}
- 搭配
font-size: clamp(1rem, 1.2rem, 1.5rem)时依然稳定 - 子元素内嵌
span加粗放大字号，行高自动按新尺寸 × 1.75 计算 - 避免设 >2.0——锚点链接点击区域会虚化，用户点文字边缘可能失效
letter-spacing 变量该用什么单位
letter-spacing 不是倍数，必须带单位；但用 px 同样危险：字体缩放时字距不会同比例变化，iOS Safari 对负值尤其敏感，中文易粘连。
推荐用 em（相对当前字体）或 rem（相对根字号）：
:root {
--text-letter-spacing: 0.02em; /* 全局微调 */
}
h2 {
letter-spacing: var(--text-letter-spacing);
}
code {
letter-spacing: -0.01em; /* 代码块可略收紧 */
}
- 中文正文一般不加
letter-spacing，思源黑体、HarmonyOS Sans 等现代字体已自带优化字距 - 标题类大字号可用
0.03em–0.05em缓解拥挤，但避免-0.1em这种强负值 - WCAG 建议保持 ≤
0.12em，过大会干扰屏幕阅读器语音停顿
长文本必须分层定义变量，不能一刀切
正文、标题、引文、代码块对行高和字距的诉求完全不同。强行共用一套变量，反而破坏可读性。
建议结构如下：
:root {
--text-body-line-height: 1.75; /* 中文正文起步值 */
--text-title-line-height: 1.2; /* 标题紧凑感 */
--text-quote-line-height: 1.6; /* 引文需稍留白 */
--text-code-line-height: 1.4; /* 代码行高宜低 */
--text-body-letter-spacing: 0; /* 正文通常不调 */
--text-title-letter-spacing: 0.03em;
}
- 「霞鹜文楷」这类字怀宽大的字体，
--text-body-line-height设1.5就够了，盲目拉高会割裂段落呼吸感 - 移动端小字号段落建议用媒体查询覆盖：
@media (max-width: 768px) { :root { --text-body-line-height: 1.8; } } - 深色模式只需覆盖变量：
@media (prefers-color-scheme: dark) { :root { --text-letter-spacing: 0.025em; } }
真正难的不是选哪个数值，而是判断哪段文字需要收紧、哪段需要留白——同一页面里，标题、正文、引用块、代码片段的 line-height 和 letter-spacing 都该有明确意图，而不是凭感觉调完就算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
