HTML5字体可视化设置技巧

Firefox 自 2020 年起默认禁用大部分 execCommand 样式类命令（包括 fontName、fontSize），仅保留基础格式（如 bold、insertUnorderedList）。这不是 bug，是主动限制。

绕过方法只有两个：

• 改用 Selection + Range 手动包裹：获取当前选区，创建 ，设置 style.fontFamily，再用 range.surroundContents()
• 引入 iframe + designMode = 'on' 模式（兼容性更好，但维护成本高，且无法和现代 CSS-in-JS 生态无缝集成）

别指望加 about:config 开关解决 —— 用户环境不可控，生产环境必须降级处理。

用 CSS @font-face 加载自定义字体后怎么让编辑器识别

即使你已通过 @font-face 正确声明了字体，execCommand 仍不会自动列出它；编辑器 UI 的字体下拉菜单需要手动维护字体列表，不能依赖系统枚举。

• 把可用字体写死在 UI 下拉项中：['Arial', 'SimHei', 'Noto Sans SC', 'LXGW WenKai']，每个选项对应一个 execCommand 调用
• 若字体文件较大（如思源黑体 > 10MB），避免在初始化时就加载全部，应按需 new FontFace() + load()，再更新下拉菜单状态
• 注意字体名称大小写敏感：CSS 中定义的是 font-family: 'LXGW WenKai'，JS 里就必须传完全一致的字符串，多空格或单双引号不匹配都会回退到默认字体

React/Vue 项目里绑定字体下拉框的坑

框架的响应式绑定（如 Vue 的 v-model 或 React 的 useState）容易掩盖原生编辑行为。典型现象：选中文字 → 点击下拉 → 字体变了，但光标跳到开头，或刚设的字体被框架 diff 覆盖。

• 不要用 v-model 绑定 contenteditable 元素的值 —— 它不是表单控件，没有 value 属性
• 下拉框 change 事件中，先调用 document.execCommand，再手动同步状态（如 setFontFamily('Noto Sans SC')），而不是反过来
• 如果用了 dangerouslySetInnerHTML 或 v-html 渲染内容，字体样式会被清空 —— 必须从 HTML 字符串里解析并重建 style 或 font 标签

可视化编辑的字体控制从来不是纯前端样式问题，它卡在 DOM 操作、浏览器差异、框架生命周期和字体加载时机四者的交界上。少一个环节对齐，用户就会看到字体闪一下又变回去。

到这里，我们也就讲完了《HTML5字体可视化设置技巧》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！