【前端功能点】字体包压缩

洛城赋
650 阅读2分钟

思路

  1. 创建一个前端项目，该项目只需要展示一个页面

1711071238476.png

  1. 点击提交，拉起文件选中的弹窗，选择项目中的font-spider.html文件，浏览器会出提示，点击保存更改即可
  2. 修改成功后，执行项目中的shell.sh脚本，则会在项目的fonts目录下生成压缩好的字体包
  3. 复制出压缩后的字体包使用即可 注：font-spider.html文件和shell.sh在该项目中(项目源码链接在结尾)

为什么要这么麻烦？这样做有什么好处？

原因

  1. font-spider 包对html文件中动态生成的文字无法提取，故前端三大框架均不能直接使用
  2. 当然也可以将字体压缩的逻辑放在开发的项目中，但这样的话，项目会感觉很乱，打包配置也要做些修改
  3. 三大框架使用时，只能提前将文字整理出来放在一个新的html文件中，然后再执行压缩处理，比较麻烦

好处

  1. 提取成新项目后，属于一个单独的项目，不会影响到业务项目
  2. 全程只有将文字复制到文本框这步算是最复杂的，整体操作简单，有可视化界面
  3. 其他项目也能通用，类似一个工具项目

大致讲下关键逻辑

  1. 点击提交，获取表单数据
  2. 对数据做处理（文字去重）
  3. 利用showOpenFilePicker该api调起文件上传，返回一个Promise，如果用户选了文件会得到文件信息
  4. 拿到文件信息的对象时，再调用文件信息的createWritable方法,该方法也是一个Promise用于创建一个可写流
  5. 将数据写入，并关闭写入流，弹出成功提示
  6. 新的html文件生成后，执行shell.sh文件
  7. 从fonts目录中复制压缩后的字体包即可

关键逻辑的代码实现

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脚本

#! /bin/bash
echo "hello woild"
# 执行命令
font-spider ./font-spider.html

总结下

  • 这种实现目前也存在一些问题，比如暂时只支持TTF格式，需要拉项目到本地代码运行，不支持部署线上
  • 操作上依然有些麻烦
  1. 需要自己整理文字，复制到文本域中
  2. font-spider.html文件修改后需要在项目源代码中执行shell.sh脚本
  3. 手动复制压缩好的文件
avatar
文章
阅读
粉丝