开发Chrome/Firefox字体替换扩展：识别并更新含font-family的元素

针对你开发Chrome/Firefox字体替换扩展时遇到的「全局替换破坏字体图标、多语言冲突、性能开销大、无法读取第三方网站cssRule」这些问题，以下是精准可行的解决思路：

核心思路：用CSS覆盖+精准排除替代全元素遍历 #

直接遍历所有元素或读取cssRule的方案要么性能差要么受安全限制，换用CSS优先级覆盖+规则排除的方式，既能高效处理全局样式，又能避开字体图标和其他语言元素。

1. 避开字体图标，防止UI破坏 #

字体图标通常有固定的类名（如fa-*、icon-*）或专属font-family（如FontAwesome、Material Icons），在CSS中直接排除这些元素：

/* 全局替换字体，但排除字体图标类和图标字体 */
*:not(.fa):not(.icon):not([class*="icon-"]):not([style*="font-family: FontAwesome"]):not([style*="font-family: Material Icons"]) {
  font-family: 你的目标字体 !important;
}

这种方式不用遍历任何元素，由浏览器原生处理样式优先级，性能开销极低。

2. 多语言字体区分处理 #

利用CSS的:lang()伪类，针对不同语言的元素设置专属字体，无需修改其他语言的样式：

/* 中文元素替换为中文字体 */
*:not(.fa):not(.icon):lang(zh-CN), *:not(.fa):not(.icon):lang(zh-TW) {
  font-family: "思源黑体", sans-serif !important;
}
/* 英文元素替换为英文字体 */
*:not(.fa):not(.icon):lang(en) {
  font-family: "Inter", sans-serif !important;
}

如果页面未设置lang属性，可以结合JavaScript检测元素文本的语言脚本（用Intl.Segmenter区分汉字、拉丁字母等），再给元素动态添加lang属性或直接设置内联字体。

3. 高效处理SPA动态加载内容 #

对于单页应用的动态新增元素，不用全量遍历，只监听DOM新增节点并处理：

// 定义需要排除的字体图标类和字体族
const EXCLUDE_CLASSES = ['.fa', '.icon', '[class*="icon-"]'];
const EXCLUDE_FONTS = ['FontAwesome', 'Material Icons'];

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    mutation.addedNodes.forEach(node => {
      if (node.nodeType !== Node.ELEMENT_NODE) return;
      // 跳过字体图标元素
      if (node.matches(EXCLUDE_CLASSES.join(','))) return;
      
      const computedFont = window.getComputedStyle(node).fontFamily;
      // 跳过使用图标字体的元素
      if (EXCLUDE_FONTS.some(font => computedFont.includes(font))) return;
      
      // 替换为目标字体
      node.style.fontFamily = '你的目标字体 !important';
    });
  });
});

// 监听body下所有子节点变化
observer.observe(document.body, { childList: true, subtree: true });

这种方式只处理新增元素，避免了全量遍历的性能损耗。

4. 单独处理内联font-family元素 #

对于直接设置内联style="font-family:..."的元素，用属性选择器精准定位并替换：

const inlineFontElements = document.querySelectorAll('[style*="font-family"]');
inlineFontElements.forEach(el => {
  const currentFont = el.style.fontFamily;
  if (EXCLUDE_FONTS.some(font => currentFont.includes(font))) return;
  el.style.fontFamily = '你的目标字体 !important';
});

方案优势 #

• 性能高效：大部分样式由浏览器原生CSS处理，仅动态元素和内联样式需要少量JS操作
• 兼容性好：避开Chrome的cssRule安全限制，适配所有第三方网站
• 精准控制：通过排除规则避免破坏字体图标，多语言区分不影响其他语言显示

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