最稳的行高控制方式是用无单位数值定义css变量--text-line-height并配合line-height: var(--text-line-height)；存为px或em会导致继承失真，js须通过document.documentelement.style.setproperty更新并持久化至localstorage，还需结合字体加载差异与真实设备眼验微调。
直接用 --text-line-height 变量 + line-height: var(--text-line-height) 是最稳的控制方式；硬编码 style.lineHeight 或写死像素值，会导致主题切换失效、字体缩放错位、维护成本飙升。
为什么必须用无单位数值存变量？
行高变量如果存成 24px 或 1.5em，子元素继承时会脱离当前 font-size 重新计算，结果不可控。只有无单位数字（如 1.75）才能让浏览器自动按“当前字号 × 倍数”实时渲染。
-
:root { --text-line-height: 1.75; }✅ 正确：所有p、h2等设line-height: var(--text-line-height)后，自动随各自字号缩放 -
--text-line-height: 24px;❌ 错误：字体变大后行高卡死，文字大概率重叠 -
--text-line-height: 1.75em;❌ 错误：先按父级字号算出固定像素，再被子级继承，二次计算失真
如何用 JS 安全更新并持久化变量？
必须调用 document.documentElement.style.setProperty()，改 body 或其他节点完全无效——因为 CSS 变量作用域只在 :root。
- 滑块控制示例：
slider.addEventListener('input', () => document.documentElement.style.setProperty('--text-line-height', slider.value)) - 输入校验建议加范围限制：
Math.max(1.2, Math.min(2.5, parseFloat(value)))，防止过小导致文字粘连 - 刷新不丢失：存到
localStorage，页面加载时先读取再setProperty回填
字体加载与度量差异带来的视觉坑
WebFont 加载前用后备字体渲染，字形高度不同，会导致行高“看着矮”；Sass 里用 math.div(24px, 1rem) 算出的理论值，也常比实际需要小 0.05～0.15。
- 微调建议：
#{math.div(24px, 1rem) + 0.1}，而不是死守数学结果 - 眼验必须做：在真实设备上，用不同字号、不同背景色、不同字体组合测试呼吸感
- 避免依赖
line-height: normal，它由浏览器和字体共同决定，跨平台差异大
变量本身不难，难的是它嵌在字体度量、浏览器渲染、用户缩放三者交界处——改完值不等于调好了，得亲眼确认每一处段落是否“刚好够呼吸”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
