求可爬取全站统计已使用字体、字重、样式的工具及开发思路

现有可用工具推荐 #

• 无头浏览器类工具
  • Puppeteer 生态下的 font-scanner 相关脚本：可以配合爬虫遍历全站所有可访问路由，每个页面加载完成后调用window.getComputedStyle遍历所有DOM节点获取实际渲染使用的font-family、font-weight、font-style属性，自动去重汇总
  • Lighthouse 自定义审计规则：可以基于Lighthouse的批量站点审计能力，新增字体使用统计的自定义审计项，跑完批量任务后直接导出结构化的清单
• 本地代理抓包类工具
  • 可以配合Charles/Whistle这类代理工具开启全站爬取，同时拦截所有字体加载请求，结合页面渲染后的字体调用数据，交叉验证实际被使用的字体文件，排除仅加载未调用的资源

PHP 基于 DOMDocument 的实现思路 #

如果要自主开发相关功能，整体可以按以下步骤实现：

1. 全站爬虫模块
   • 先基于DOMDocument解析入口页面的所有<a>标签，提取同域名下的可访问URL，做去重、排除静态资源/非页面URL处理，生成全站页面URL队列
   • 注意设置合理的爬取延迟，避免对目标站点造成过大压力，同时做好3xx/4xx状态码的异常页面兼容处理
2. 页面字体信息提取模块
   这里需要注意纯DOMDocument只能解析静态HTML和内嵌CSS，无法获取JS动态插入的样式和实际渲染生效的字体，建议搭配php-headless-chrome或者puppeteer-php桥接无头浏览器使用，否则统计结果会有明显遗漏：
   • 静态解析部分：用DOMDocument提取所有<link rel="stylesheet">的CSS地址、<style>内嵌样式，解析所有@font-face声明，先拿到站点所有声明加载的字体列表
   • 动态渲染部分：调用无头浏览器加载页面，等待所有资源加载完成后，执行JS脚本遍历所有DOM节点，获取每个节点的getComputedStyle(node).fontFamily、getComputedStyle(node).fontWeight、getComputedStyle(node).fontStyle，把所有值汇总去重
3. 结果汇总导出模块
   • 把所有页面统计到的字体信息做全局去重，交叉对比第一步拿到的已声明加载的字体列表，标记出「已加载但未实际使用」的字体项
   • 支持导出为CSV/HTML表格形式，字段可以设置为：字体名称、字重、样式、使用页面数、关联加载的字体文件地址

注意：如果仅用纯DOMDocument不搭配无头浏览器，只能统计到静态CSS声明的字体，无法统计JS动态添加的样式、以及 fallback 机制下实际生效的字体，统计结果准确率会低很多，建议还是搭配无头浏览器能力使用。

内容的提问来源于stack exchange，提问作者Philip Light