用自托管字体替换Google字体
我目前正在移植一个遗留代码库的部分，它有超过100个主题，每个主题都带有自己的css文件。这些文件都是硬编码链接到谷歌字体，需要更换，因为GDPR。
是否有某种自动工具可以扫描这些文件，替换到Google字体的链接并下载所有资产？我在网上找到了一些半自动工具，但它们都需要复制粘贴和手动下载文件。这是没有问题的2-3字体，但对数百个他们。有什么建议吗？
回答 3
Stack Overflow用户
发布于 2022-07-11 14:25:31
我已经做了一些努力来创建这个NodeJS脚本。
此脚本搜索所有css文件并提取woff字体url。然后，它根据找到的url替换下载文件的绝对路径，并下载相关目录中的文件，该目录可以在代码段中明确标识为fontDownloadDirectoryPath变量指定的文件。
该脚本可以进一步修改和改进，但到目前为止，它在基本级别提供了所需的功能。
我希望这可以作为一个起点--至少可以用来解决所述的问题--或者作为一个解决方案完全可以用来改变几个变量，考虑到我关于得到这个解所需的东西很少是正确的。
请随意修改，因此，就像regex模式来匹配其他东西，在模式中添加少量其他字体类型，添加少量代码以使其更加健壮和泛化，等等。
const path = require('path');
const fs = require('fs');
const https = require("https");
// update assets/css with your css path
const directoryPath = path.join(__dirname, 'assets/css');
let fontDownloadDirectoryPath = path.join(__dirname, 'assets/fonts')
let fontDownloadDirectoryFileFullPath = path.join(__dirname, 'assets/fonts/fontsDownloadUrlList.json')
fs.readdir(directoryPath, function (err, files) {
//handling error
if (err) {
return console.log('Unable to scan directory: ' + err);
}
//listing all files using forEach
files.forEach(function (file) {
// Do whatever you want to do with the file
let file_full_path = directoryPath + "/" + file
fs.readFile(file_full_path, 'utf8', (err, content) => {
if (err) {
console.error(err);
return;
}
// console.log(content);// show the content of readed file
let found = content.match(/url\(['"]([^"']+(woff2|eot|woff|ttf)["'])+\)/gi)
console.log(file_full_path, found);
let updated_content = content
if (found) {
if (fs.existsSync(fontDownloadDirectoryFileFullPath)) {
// enter the code to execute after the folder is there.
console.log('file exists')
fs.readFile(fontDownloadDirectoryFileFullPath, 'utf8', (err, read_content) => {
let read_content_json = JSON.parse(read_content)
read_content_json.push(...found)
fs.writeFile(fontDownloadDirectoryFileFullPath, JSON.stringify(read_content_json), function () { })
})
} else {
fs.writeFile(fontDownloadDirectoryFileFullPath, JSON.stringify(found), function () { })
}
console.log(found)
found.forEach((item) => {
let fontFileUrl = item.split("'")[1]
let fontFileName = fontFileUrl.split("/")[fontFileUrl.split("/").length - 1]
console.log(fontFileUrl, fontFileName)
https.get(fontFileUrl, response => {
var body = '';
var i = 0;
response.on('data', function (chunk) {
i++;
body += chunk;
console.log('BODY Part: ' + i);
});
response.on('end', function () {
console.log(body);
fs.writeFileSync(fontDownloadDirectoryPath + "/" + fontFileName, body, { encoding: 'utf8', flag: 'w' }, (err) => { console.log(err) })
console.log('Finished');
});
});
updated_content = updated_content.replace(item, "url('" + fontDownloadDirectoryPath + "/" + fontFileName + "')")
})
} else {
updated_content = content;
}
fs.writeFileSync(file_full_path, updated_content, { encoding: 'utf8', flag: 'w' })
});
});
});
我使用下面的css文件在具有styles.css名称的root/assets/css目录中测试上面的脚本：
@font-face {
font-family: 'BR Firma';
src: url('https://fonts.gstatic.com/s/opensans/v29/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4taVQUwaEQbjB_mQ.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;}
Stack Overflow用户
发布于 2022-07-11 12:18:12
在不需要更多关于项目、目录结构等背景知识的情况下，我将概述如何从现在开始完成任务：
- 如果没有从一个主CSS文件导入字体(可能发生)，则扫描项目的所有目录或URL(如果您在本地或远程运行它)。
- 获取所有Google字体URL
- 下载所有资产(即从链接中下载字体，也可以下载一些图片等)。
因此，尽管您完全可以通过目录在本地完成这一任务，但这里我将解释一种使用浏览器进行此操作的方法--为了简洁--而且可能更方便--使用Python。我假设您可以访问该项目的URL，ofc。
- 您可以按照这种方法来抓取您想要的URL。从站点地图中传递一个列表，依次遍历所有的URL。然后，您可以过滤您获得的
list，您只需为Google字体添加in运算符(如在这里中)，就可以分别获得真或假。 子字符串= 'https://fonts.googleapis.com‘如果子字符串在元素:list.append(元素)中：#什么都不做，不要添加到列表中 - 现在，您应该拥有您感兴趣的所有URL。如果该项目有几个具有不同字体的HTML页面，那么这些页面就是您需要扫描的页面--或者仅仅是所有这些页面都可以确定。注意:通常将列表存储在文件中以进一步将此代码添加到前面的脚本中是非常有用的。更多信息。
with open('urls.txt', 'w') as f:
f.write(element)- 要下载这些资产，可以使用这种方法。既然你有所有的URL，你应该可以。
差不多就是这样了！如果您对项目结构添加更多的洞察力，我们可以更精确地完成脚本。此外，您还可以在优化脚本时快速使用朱庇特笔记本来运行它们。同时，有待澄清的公开细节如下：
- 扫描网站还是文件？
- 只有HTML文件或所有项目？
- 下载什么？只有字体资产？
- Python脚本可以很好地完成这个任务吗？
Stack Overflow用户
发布于 2022-07-11 19:42:28
任何IDE都可以使用适当的模式“在文件中搜索和替换”。例如：PHPStorm:使用正则表达式查找和替换文本。单独找到所有的事件已经很有价值了，IDE可能有助于“移植遗留代码库的部分”。
https://stackoverflow.com/questions/72783377
复制相似问题
腾讯云开发者
