应直接删除font标签及其face、size、color属性，保留style中字体相关CSS声明；推荐用DOMParser+querySelectorAll安全清理，避免正则误匹配，并同步移除Office冗余data属性。
直接删 font 标签和 face、size、color 这类属性，别碰 style 里字体相关的声明——它们是现代 CSS 的一部分，删了反而破坏排版一致性。
为什么不能用正则删 font 标签里的属性
常见错误是写 innerHTML.replace(/<font>]*>/g, '')</font> 或类似正则，结果把 <font face="Arial" size="3"></font> 删了，但漏掉 <font color="#ff0000"></font>，更糟的是可能误匹配到注释或 JS 字符串里带 font 的内容。
-
font标签本身已废弃，HTML5 不再支持，必须移除整标签，不能只删属性 -
face、size、color是它的专属属性，没有语义，且浏览器兼容性差（比如 Firefox 91+ 已完全忽略face） - 若只删属性而保留空
<font></font>，某些编辑器（如 CKEditor 5）会在序列化时自动补回默认属性，等于白干
用 DOMParser + querySelectorAll 安全清理
这是目前最稳的路径：先解析成独立文档，再精准定位并移除。不污染当前 DOM，也不怕嵌套结构。
- 用
DOMParser解析 HTML 字符串，避免操作真实页面节点 - 查所有
font标签：doc.querySelectorAll('font')，包括自闭合写法（虽然不存在，但 querySelectorAll 会忽略语法错误） - 对每个
font元素，用el.replaceWith(...el.childNodes)拆出子内容并替换自身，比el.outerHTML = el.innerHTML更安全（后者在含script或textarea时会触发执行或转义） - 顺手清理 Office 粘贴带来的
data-ccp-props、data-contrast等冗余属性，它们常和font同时出现
function cleanFontTags(htmlString) {
const parser = new DOMParser();
const doc = parser.parseFromString(htmlString, 'text/html');
// 清理 font 标签
doc.querySelectorAll('font').forEach(el => {
el.replaceWith(...el.childNodes);
});
// 清理 Office 冗余属性
doc.querySelectorAll('[data-ccp-props], [data-ccp-parastyle], [data-contrast]').forEach(el => {
el.removeAttribute('data-ccp-props');
el.removeAttribute('data-ccp-parastyle');
el.removeAttribute('data-contrast');
});
return doc.body.innerHTML || doc.documentElement.innerHTML;
}
注意 class 和 style 里的字体声明别乱动
很多人看到 class="arial-font" 或 style="font-family: Verdana;" 就想一并清除，这不对。这些是开发者有意设置的样式规则，属于有效排版逻辑。
立即学习“前端免费学习笔记（深入）”；
-
class名无法靠名字判断是否多余，得结合 CSS 文件或编辑器主题配置才能决定是否该删 -
style中的font-family、font-size、color是标准 CSS 属性，删了会让文本回归浏览器默认值（通常是 Times New Roman + 16px），和原始意图相悖 - 真正该清的是内联
style里那些无意义的冗余项，比如style="margin: 0; padding: 0; font-weight: normal;"—— 这些应由 CSS 重置统一处理，而非塞进 HTML
清理富文本里的字体相关冗余，核心就一条：只动已废弃的 HTML 结构（font 标签及其属性），不动现代 CSS 表达。最容易被忽略的是清理后没做递归校验——如果 font 标签里还嵌了 font，用 querySelectorAll 能一次扫完，但用 childNodes 替换后的新节点不会自动被再次匹配，所以必须确保初始查询是全量的。
