如何获取网页全部字体及对应src/URL？兼容Google Font与自定义CSS

方案1：直接从document.fonts的FontFace对象提取src #

document.fonts返回的FontFaceSet包含页面加载的所有字体实例，每个FontFace对象的src属性直接存储了字体的源定义（包含URL和格式）。你可以遍历并解析这个属性提取URL：

// 等待所有字体加载完成（可选，确保捕获懒加载字体）
document.fonts.ready.then(() => {
  // 遍历所有已加载的字体
  document.fonts.forEach(fontFace => {
    const { family, src } = fontFace;
    // 从src字符串中匹配并提取URL部分
    const urlMatch = src.match(/url\(["']?([^"')]+)["']?\)/);
    if (urlMatch) {
      const fontUrl = urlMatch[1];
      console.log(`字体家族: ${family}, 源URL: ${fontUrl}`);
    } else {
      console.log(`字体家族: ${family}, 无外部URL（可能是系统字体）`);
    }
  });
});

这个方法天然兼容Google Font——Google Font加载后会生成对应的FontFace对象，其src属性包含Google字体CDN的URL；自定义CSS加载的字体也能被正常捕获。

方案2：通过Performance API捕获字体资源请求 #

如果部分字体未被document.fonts捕获（比如某些延迟加载的字体），可以用浏览器的Performance API获取所有已加载资源，筛选出字体类型文件再关联字体信息：

// 获取所有资源请求记录
const performanceEntries = performance.getEntriesByType('resource');
// 筛选字体格式的资源（woff/woff2/ttf/otf/eot等）
const fontResources = performanceEntries.filter(entry => 
  entry.initiatorType === 'css' && 
  /\.(woff2?|ttf|otf|eot)$/i.test(entry.name)
);

// 遍历输出字体资源URL，可结合document.fonts关联字体家族
fontResources.forEach(resource => {
  console.log(`字体资源URL: ${resource.name}`);
  // 通过URL匹配关联对应的FontFace对象
  const matchedFont = [...document.fonts].find(font => 
    font.src.includes(resource.name)
  );
  if (matchedFont) {
    console.log(`对应字体家族: ${matchedFont.family}`);
  }
});

这个方法完全绕过CORS限制，因为Performance API不需要访问样式表内容，仅读取资源请求记录。

方案3：浏览器扩展环境下的特殊处理 #

如果是在浏览器扩展中实现需求，扩展拥有跨域访问权限，可以直接读取所有样式表的cssRules：

// 仅适用于浏览器扩展（需在manifest中配置<all_urls>权限）
Array.from(document.styleSheets).forEach(async styleSheet => {
  try {
    const rules = styleSheet.cssRules;
    // 遍历所有@font-face规则
    Array.from(rules).forEach(rule => {
      if (rule.type === CSSRule.FONT_FACE_RULE) {
        const { fontFamily, src } = rule.style;
        const urlMatch = src.match(/url\(["']?([^"')]+)["']?\)/);
        if (urlMatch) {
          console.log(`字体家族: ${fontFamily}, 源URL: ${urlMatch[1]}`);
        }
      }
    });
  } catch (e) {
    console.log(`处理样式表 ${styleSheet.href} 时的异常:`, e);
  }
});

注意事项 #

• 系统字体（如Arial、Times New Roman）没有外部URL，会被方案1识别为“无外部URL”。
• 对于动态加载的字体，务必等待document.fonts.ready完成后再执行遍历逻辑，避免遗漏。

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