不能用 document.execcommand('fontsize')，因其已被chrome 97+和firefox废弃、safari不支持，会静默失败并插入语义错误的标签；必须用css内联style.fontsize控制选区字号，推荐rem单位，并同步适配line-height等依赖相对单位的样式。
contenteditable 区域里直接改 font-size 样式，不靠废弃的 document.execCommand，才能稳定生效、兼容现代浏览器、支持无障碍。
为什么不能用 document.execCommand('fontSize', ...)
这个 API 已被 Chrome 97+ 和 Firefox 早已标记为废弃，Safari 从不支持。调用后可能静默失败，DevTools 里也看不到报错；更关键的是它会把字号塞进 <font size="4"></font> 这类过时标签，破坏语义、干扰 CSS 优先级、导致打印和屏幕阅读器行为异常。
富文本中改字号必须用 CSS + style 属性
对选中文本应用内联 font-size 是唯一可靠路径。但要注意作用范围和单位选择：
- 用
getSelection()获取当前选区，再用Range.extractContents()或Range.surroundContents()包裹选中文本（需确保选区在单个文本节点内，否则要先 normalize） - 包裹后给新元素设
style.fontSize = '18px'或'1.2rem'——推荐用rem，避免嵌套放大失控 - 别直接改
contenteditable容器的font-size，否则未选中的文字也会变，失去“局部调整”意义 - 如果用户粘贴了带样式的 HTML，记得在插入前 strip 掉原有
font-size内联样式，否则新设置会被覆盖
数字输入框绑定字号变化的实操要点
用 <input type="number"> 控制字号时，核心是监听 input 事件而非 change，保证实时响应：
- 设
min="8"、max="72"、step="1"，防止输非数字或超限值 - 输入值需强制转为数字再拼单位：
el.valueAsNumber + 'px'，避免字符串拼接出"16pxpx" - 每次更新后，用
document.execCommand('styleWithCSS', false, true)强制启用 CSS 模式（仅作兼容兜底，Chrome/Firefox 新版已默认开启） - 若编辑器支持撤销栈，字号操作必须触发
document.execCommand('insertHTML')或自定义 history 记录，否则 Ctrl+Z 无法回退
最易被忽略的可访问性细节
字号变更后，line-height、padding、border-radius 这些依赖 em 或 rem 的属性必须同步适配——否则文字变大了，行距还是原来那点，上下挤在一起；按钮内边距没变，文字顶到边缘。所有排版相关尺寸，只要不是 px 硬写，就得确认是否跟着根字号联动。这不是“锦上添花”，是避免用户调大字体后根本没法读完一段话。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
