富文本行高必须通过根容器CSS变量定义并继承，配合子元素line-height: inherit兜底，避免em单位和scoped样式限制，主题切换需统一更新所有相关变量。
富文本容器必须显式继承 CSS 变量
直接给 contenteditable 区域（比如 <div class="editor">）设 line-height: var(--editor-line-height, 1.6); 是无效的——因为编辑器内部生成的 HTML 片段（如 <p>、<h2>、<span>）默认不继承父级 CSS 变量，尤其在序列化/反序列化后变量作用域会丢失。
正确做法是把变量注入到内容容器本身，并确保子元素能沿用：
- 给编辑器根容器加类（如
.editor-content），并在其上声明line-height: var(--editor-line-height, 1.6); - 对常用内联标签单独兜底：例如
strong, em, a { line-height: inherit; }，避免浏览器默认样式覆盖 - 若使用 Quill / TinyMCE 等第三方编辑器，需通过
content_style或formats配置项把变量透传进 iframe 或 shadow DOM 内部
行高变量不能只靠 font-size 倍数推导
line-height 设为无单位数值（如 1.6）虽能随 font-size 自适应，但在富文本场景下容易失控：用户可能对某段文字单独设置 font-size: 24px，而该段落的 line-height 却仍按根字体（如 16px）计算，导致行距过小、文字重叠。
更稳妥的方式是让行高变量本身带单位，或用 clamp() 锚定范围：
立即学习“前端免费学习笔记（深入）”；
- 推荐定义：
:root { --editor-line-height: clamp(1.4, 1.6, 1.8); }，兼顾小字号下的可读性与大字号时的呼吸感 - 若需精确控制，用
rem单位：--editor-line-height: 1.6rem;，再配合font-size: 1rem的基础设定 - 避免用
em，因为嵌套层级中em会逐层累积，line-height: 1.6em在<h2 style="font-size: 2em">下实际变成3.2em
Quill 编辑器里改行高要绕过 scoped 样式限制
Vue 项目中用 vue-quill-editor 时，如果把行高样式写在 <style scoped> 里，.ql-snow .ql-picker.ql-lineheight 这类选择器根本不会生效——因为 Quill 的工具栏是动态挂载到 body 下的，不在组件作用域内。
实操要点：
- 把行高相关 CSS 放到全局样式文件（如
main.css）或<style>标签不加scoped - 自定义
lineHeightAttributor时，白名单值（如["1", "1.5", "2"]）必须和 CSS 中content值严格一致，否则工具栏选项无法匹配已存在的行高 - 编辑器初始化后，手动触发一次
quill.format('lineHeight', '1.5')才能确保首段默认应用变量值
切换主题时行高变量容易被忽略
很多项目做主题切换只改颜色变量（--editor-bg、--editor-text），却漏掉 --editor-line-height。结果深色模式下文字变大了，行高还是旧值，造成行间挤压。
关键细节：
- 主题 class（如
.theme-dark）应统一定义所有相关变量，包括行高：.theme-dark { --editor-line-height: 1.7; } - 不要依赖 JS 动态修改单个变量，而是切换整个 class，避免遗漏或顺序错乱
- 测试时重点看多级标题混排场景：
<h1>+<p>+<blockquote>同时存在时，各元素的line-height是否都响应了变量变化
行高不是“设一次就完事”的属性，它和字体、字号、容器宽度、甚至用户缩放比例都耦合紧密；变量只是开关，真正起效需要整条链路——从根变量定义、容器继承、子元素兜底、到编辑器运行时注入——全部对齐。
