最轻量可控的动态行高方案是用--line-height CSS变量配合line-height继承机制及document.documentElement.style.setProperty()更新；硬编码style.lineHeight会破坏层叠、脱离主题响应且难以维护。
直接说结论：用 --line-height CSS 变量 + line-height 继承机制，配合 JavaScript 监听输入或滑块，是最轻量、最可控的动态行高方案。不需要重写样式表，也不依赖框架。
为什么不能直接在 JS 里改 style.lineHeight
硬编码写死数值（比如 el.style.lineHeight = '1.8'）会覆盖所有 CSS 层叠来源，一旦后续有媒体查询或主题切换，就彻底失效。更麻烦的是，它把排版逻辑从 CSS 搬到了 JS，维护成本陡增。
- 行高值通常需和字体大小联动（如
1.5 × font-size），纯 JS 管理易脱节 - 无法被
@media或:root主题变量自然响应 - 多个组件共用同一套行高策略时，重复写 JS 逻辑，难以统一收口
用 --line-height 变量 + inherit 是核心套路
把行高抽象成变量，在根节点定义默认值，子元素用 line-height: var(--line-height, 1.6) 声明，就能让整页文本自动响应变化。
:root {
--line-height: 1.6;
}
body {
line-height: var(--line-height);
}
p, h1, h2, ul, ol {
line-height: inherit; /* 关键：复用 body 的计算值 */
}-
inherit不是继承父元素原始声明值，而是继承已计算后的line-height数值（如24px），避免重复计算 - 若某段落需例外（如引用块），可局部覆盖：
blockquote { line-height: var(--line-height, 1.4); } - 变量名建议带语义，比如
--text-line-height，避免和布局类变量（如--gap）混淆
如何实时更新变量值？document.documentElement.style.setProperty() 最稳
别用 document.body.style.setProperty() —— body 不是变量作用域根，改了没用。必须操作 document.documentElement（即 :root）。
立即学习“前端免费学习笔记（深入）”；
- 滑块控制示例：
const slider = document.getElementById('lh-slider'); slider.addEventListener('input', () => { document.documentElement.style.setProperty('--line-height', slider.value); }); - 输入框校验建议加范围限制：
value = Math.max(1.2, Math.min(2.5, parseFloat(value)))，防止过小导致文字粘连或过大造成空洞 - 如需持久化（刷新不丢失），存到
localStorage并在页面加载时回填变量值
注意字体加载与行高错位这个隐藏坑
WebFont 加载完成前，浏览器用后备字体渲染，而后备字体的字形高度和度量（ascent/descent）往往不同，line-height 虽然数值没变，但视觉行距会突变——尤其在 font-display: swap 场景下明显。
- 解决方案不是调变量，而是用
@font-face的size-adjust或line-gap-override（Chrome 122+ 支持）提前对齐字体度量 - 兼容性要求高时，可在
fontload事件后微调一次变量值，作为兜底 - 别指望
line-height: normal动态适应字体——它只读取当前字体的 metrics，且不可控
真正难的不是设变量，而是厘清「哪些元素该继承、哪些该隔离」，以及在字体替换、缩放、深色模式等多维变量叠加时，保持行高语义不变。变量只是开关，设计约束才是关键。
