将letter-spacing和line-height常用值抽为css变量（如--text-letter-spacing、--text-line-height）是批量调控长文本可读性的最可控方式；line-height变量须用无单位数值以保持响应式，letter-spacing则宜用em/rem单位；需按正文、标题、代码等场景分层定义变量，并与字体特性联动。
用 CSS 自定义属性统一管理 letter-spacing 和 line-height
直接结论：把 letter-spacing 和 line-height 的常用值抽成 CSS 变量（--text-letter-spacing、--text-line-height），再在选择器中引用，是实现长文本可读性批量调控最可控的方式。硬编码数值会导致改一处、漏十处，尤其在多端适配或主题切换时极易失控。
变量不是为了“炫技”，而是解决真实维护问题：
- 设计师临时要求「所有正文行高+0.1」，你不用 grep 全局找
line-height: 1.6，只改一个变量值即可 - 深色模式下微调字间距提升辨识度，只需覆盖变量，无需重写整套文本规则
- 移动端小字号段落需要更大行高（如
1.8），可通过媒体查询精准覆盖变量，不污染桌面端样式
为什么 line-height 必须用无单位数值配合变量
如果你写 --text-line-height: 24px，再用 line-height: var(--text-line-height)，等于把响应式能力直接废掉——子元素字体变大时，行高卡死不动，文字大概率重叠。
正确做法是变量存倍数，计算交给浏览器：
:root { --text-line-height: 1.75; }p { line-height: var(--text-line-height); }- 当
p > em字号变成1.2em，它的行高自动按新字号 × 1.75 计算，无需额外逻辑 - 搭配
font-size: clamp(1rem, 1.2rem, 1.5rem)时，这种组合依然稳定
letter-spacing 变量要带单位，但得选对单位
letter-spacing 和 line-height 不同：它控制的是字符间绝对偏移，不能用纯数字。但用 px 同样危险——字体缩放时字间距不会等比变化，小屏上可能显得稀疏，大屏上又过于紧凑。
推荐用 em 或 rem：
:root { --text-letter-spacing: 0.02em; }h1 { letter-spacing: var(--text-letter-spacing); }-
em相对于当前字体大小，适合标题类局部微调；rem相对于根字号，适合全局一致性控制 - 避免负值过大（如
-0.1em），中文字符易粘连，iOS Safari 对负间距渲染尤其敏感
长文本场景下，变量需分层定义而非一刀切
正文、标题、引文、代码块对间距的诉求完全不同。用同一组变量硬套，反而降低可读性。
分层变量结构更贴近真实需求：
-
--text-body-line-height: 1.75;（中文正文起步值，兼顾思源黑体等现代字体的内置留白） -
--text-title-line-height: 1.35;（大字号标题，避免头重脚轻） -
--text-code-letter-spacing: 0.05em;（等宽字体需略宽字距防混淆，如l和1） -
--text-quote-line-height: 1.5;（引用块适当收紧行高，强化视觉区隔）
复杂点在于：这些变量必须和字体族、字号层级、甚至 font-kerning 开关联动。比如启用 font-kerning: auto 的字体，letter-spacing 微调幅度就得减半——这点容易被忽略，但真正在高保真排版中会直接影响阅读流畅度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
