如何批量替换CSS中Google Fonts为自托管字体并自动下载资源

针对百级规模CSS文件的批量处理需求，不需要用手动复制粘贴的半自动化工具，以下两类方案都可以做到全流程自动扫描、自动下载字体、自动替换链接，全程无人工干预。

开箱即用的命令行工具 #

• 可直接使用gfonts命令行工具：执行命令时传入目标CSS根目录即可，工具会递归扫描目录下所有.css文件，自动识别所有Google Fonts的@import引用链接，解析链接包含的字体族、字重、字符集参数，自动拉取对应字体资源（默认优先拉取体积最小的woff2格式，可通过参数配置保留woff/ttf等兼容格式），将字体文件存入你指定的静态资源目录后，自动把原CSS里的外部Google Fonts引用替换成本地路径的@font-face声明。支持自定义CSS内的引用路径前缀，适配不同主题独立目录的相对路径规则，上百个CSS文件的处理耗时通常在数分钟内。
• 若你的遗留项目已有Node.js构建流程，可以直接接入gulp-google-fonts-local插件：将CSS目录配置为构建源路径，插件会自动完成扫描、下载、替换全流程，还能自动校正跨目录的字体引用路径，不需要改动现有项目的构建逻辑，新增一个构建任务即可跑完全量主题处理。

轻量自定义脚本方案（适配特殊目录规则） #

如果现成工具的路径替换逻辑不匹配你项目100余个独立主题的目录结构，花10分钟写一个简单的Python/Node.js脚本就能完全适配自定义需求，核心逻辑非常固定：

1. 递归遍历所有主题目录，筛选后缀为.css的文件，通过正则匹配提取所有Google Fonts引用链接，覆盖@import url(https://fonts.googleapis.com/css2?...)、@import url(https://fonts.googleapis.com/css?...)两种标准写法
2. 对提取到的所有链接去重，携带支持woff2的现代浏览器User-Agent头发起请求，拿到Google返回的标准@font-face样式代码（如果不带对应UA，谷歌会返回兼容旧浏览器的大体积ttf格式资源，会大幅增加静态资源体积）
3. 解析返回样式中所有字体文件的远程地址，批量下载到对应主题下的本地字体目录（比如每个主题独立的/fonts/文件夹）
4. 将原CSS文件中的Google Fonts导入语句，替换成本地@font-face代码，自动校正路径为当前CSS文件到本地字体目录的相对路径，写回原文件即可。

处理注意事项：
替换完成后全局搜索代码目录，确认所有fonts.googleapis.com、fonts.gstatic.com的外部域名引用都已清理，避免出现GDPR合规漏项；如果项目中还有HTML文件内通过<link>标签引入的Google Fonts，只需要给脚本增加.html后缀的扫描逻辑，就能同步完成处理。

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