如何在Quill中根据当前字号自适应设置行高？

用相对行高自动适配（最简单方案） #

直接给.ql-editor设置无单位的相对行高，行高会自动跟随当前文本的字号动态计算，无需额外配置：

.ql-editor {
  font-size: 54px;
  line-height: 1.4; /* 无单位值会基于当前元素字号自动生成对应行高 */
}

比如字号为24px时，行高会自动计算为24*1.4=33.6px；字号保持54px时，行高则为54*1.4=75.6px，完美适配不同行的字号差异。

自定义不同字号的行高（精细化控制） #

如果需要给不同字号设置差异化的行高比例（比如小字号用更紧凑的行高，大字号用更宽松的行高），可以针对Quill生成的字号类单独编写样式：

.ql-editor {
  font-size: 54px;
  line-height: 1.4; /* 默认行高 */
}

/* 对应24px字号的类（需和你的下拉框实际生成的类名匹配） */
.ql-editor .ql-size-24 {
  font-size: 24px;
  line-height: 1.3;
}

/* 对应36px字号的类 */
.ql-editor .ql-size-36 {
  font-size: 36px;
  line-height: 1.35;
}

注意类名要和你字号下拉框生成的一致，Quill默认字号类为ql-size-small、ql-size-large这类，自定义字号的话要对应调整。

编辑器内同步设置行高（动态绑定） #

如果是自主开发的字号选择器，可以在选择字号的同时，给目标文本同步设置行高。示例代码如下：

// 假设你的字号选择器ID为fontSizePicker
document.getElementById('fontSizePicker').addEventListener('change', function(e) {
  const fontSize = e.target.value;
  const quill = window.quillInstance; // 你的Quill实例对象
  // 设置选中文本的字号
  quill.format('size', fontSize);
  // 按比例计算并设置行高，这里用1.4倍比例，可按需自定义
  quill.format('style', { lineHeight: '1.4em' });
});

如果Quill未启用style格式，需要在初始化编辑器时添加配置：

const quill = new Quill('#editor', {
  modules: {
    toolbar: [/* 你的工具栏配置项 */]
  },
  formats: [/* 原有格式项 */, 'style']
});

内容的提问来源于stack exchange，提问作者herve