思路
- 创建一个前端项目，该项目只需要展示一个页面
- 点击提交，会修改font-spider.html这个文件
- 修改成功后，执行写好的shell.sh脚本生成压缩后的字体包
- 复制出压缩后的字体包使用即可
为什么要这么麻烦？这样做有什么好处？
原因
font-spider 包对html文件中动态生成的文字无法提取，故前端三大框架均不能直接使用- 当然也可以将字体压缩的逻辑放在开发的项目中，但这样的话，项目会感觉很乱，打包配置也要做些修改
好处
- 提取成新项目后，属于一个单独的项目，不会影响到业务项目
- 全程只有将文字复制到文本框这步算是最复杂的，整体操作简单，有可视化界面
- 其他项目也能通用，类似一个工具项目
大致讲下关键逻辑
- 点击提交，获取表单数据
- 对数据做处理（文字去重）
- 利用
showOpenFilePicker该api调起文件上传，返回一个Promise，如果用户选了文件会得到文件信息
- 拿到文件信息的对象时，再调用文件信息的
createWritable方法,该方法也是一个Promise用于创建一个可写流
- 将数据写入，并关闭写入流，弹出成功提示
- 新的html文件生成后，执行shell.sh文件
- 从fonts目录中复制压缩后的字体包即可
一下就是 以上关键逻辑的代码实现
js
复制代码
function submit() {
const from = document.getElementById("form");
const formData = new FormData(form);
const chats = formData.get("words").trim();
const name = formData.get("word-name").trim();
let c = "";
if (chats) {
new Set(chats.split("")).forEach((v) => {
c += v;
});
}
if (c) {
const whireFile = async () => {
const title = document.getElementById("title");
title.innerText = "加载中...... 请等待";
title.style.color = "red";
const [fileHider] = await window.showOpenFilePicker();
const file = await fileHider.getFile();
const writable = await fileHider.createWritable();
await writable.write(
`<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title>字蛛-压缩字体包</title><style>@font-face{font-family:${name};src: url("./fonts/${name}.TTF")}</style></head><body><div style="font-family: ${name};">${c}</div></body></html>`
);
await writable.close();
title.innerText = " 字蛛-压缩字体包";
setTimeout(() => {
alert("加载完成");
}, 300);
};
whireFile();
} else {
alert("请输入有效字符");
}
}
shell脚本
js
复制代码
#! /bin/bash
echo "hello woild"
# 执行命令
font-spider ./font-spider.html
总结下