用--text-lh: 1.6定义无单位行高最稳妥，配合line-height: inherit确保继承已计算值，根节点设置、js更新需调用document.documentelement.style.setproperty()，并注意字体加载抖动与变量解耦。
用 --lh 变量定义无单位比例值最稳妥
直接用无单位数字（比如 1.6）作为 --lh 的初始值，而不是 px 或 %。因为行高本质是字体大小的倍数关系，无单位值能确保子元素继承后重新计算，不会把父级的像素值“钉死”在子元素上。
-
--lh: 1.6是推荐写法；--lh: 160%行为等价但语义弱，--lh: 24px会破坏缩放响应 - 变量名建议带前缀，如
--text-lh，避免和布局类变量（如--gap）冲突 - 根节点定义即可：
:root { --text-lh: 1.6; }
line-height: var(--text-lh) 必须配合 inherit 才能穿透层级
只在 body 或容器上设 line-height: var(--text-lh) 不够——子元素默认不继承已计算值，而是继承原始声明。必须显式让文本元素“复用计算结果”。
- 对通用文本元素统一加
line-height: inherit，例如：p, h1, h2, li { line-height: inherit; } -
inherit继承的是已计算出的数值（如25.6px），不是变量本身，所以它能稳定传递缩放效果 - 例外情况（如引用块）可局部覆盖：
blockquote { line-height: var(--text-lh, 1.4); }
更新变量时必须调用 document.documentElement.style.setProperty()
改 body.style.setProperty() 没用，:root 才是 CSS 变量的作用域根。漏掉这一步，JS 改了变量但样式完全不响应。
- 正确写法：
document.documentElement.style.setProperty('--text-lh', '1.8'); - 输入校验别跳过：
const val = Math.max(1.2, Math.min(2.5, parseFloat(input.value)))，防止0.5导致文字粘连 - 如需刷新保留，读取
localStorage后立即设置变量，再触发重绘（哪怕只是getComputedStyle(document.body).lineHeight）
字体加载完成前的行高错位必须主动兜底
WebFont 加载期间浏览器用后备字体渲染，而不同字体的 ascender/descender 度量差异大，line-height 计算值可能突然跳变，造成文字“上蹿下跳”。
- 给
body加font-display: optional或swap，缩短不可控窗口期 - 关键段落可加
height: min-content配合overflow: hidden防抖动 - 不要依赖 JS 监听
fontload再改行高——时机难控，且现代字体加载策略已弱化该事件
font-size 变量解耦管理。比如标题用 --heading-lh、正文用 --body-lh，而不是硬塞进同一个 --lh 里靠媒体查询切换——逻辑混在一起，后期改一个值就得全局排查。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
