自定义字体服务 - 基于 Node 的 Web 字体解决方案

   * 优点:提供大量可商用字体,便捷获取。   * 缺点:需要付费,版权复杂,可用性有限。

   * 优点:可以收集和备份已经购买的商用字体。   * 缺点:需要确保拥有商用字体的正版授权。

   * 优点:提供大量可商用字体,便捷获取。   * 缺点:需要付费,版权复杂,可用性有限。

   * 优点:可以进行字体压缩和子集化优化。   * 缺点:需要安装依赖,优化效果取决于字体本身。

@font-face {  font-family: 'MyCustomFont';  src: url('myfont.ttf');}
body {  font-family: 'MyCustomFont', sans-serif;}

// 定义字体名称，src里就是复制的地址@font-face {  font-family: yezi; //自己起个字体名字  src: url("https://xxx/yezi_5f27fae9ad916de19343e2b8a1635680.ttf");}// 使用.font-test{  font-size: 46px;  font-family: yezi;  //设置成你上面自定义的字体}

  https://example.com/api/font?key=yezi&fontlibfile=url&word=word&pageNme=pageNmae// key 表示使用的字体包对应的key// fontlibfile 表示使用的字体包对应的url(我们的字体包是存在cdn上的)// word 表示需要提取的文字// pageNme 为了记录是哪个项目和页面使用(只针对我们的业务场景)

export default async (fontlibfile: string, key: string,  pageName: string, word: string) => {  // fontlibfile 表示使用的字体包对应的url(我们的字体包是存在cdn上的)  // key 表示使用的字体包对应的key  // word 表示需要提取的文字  // pageNme 为了记录是哪个项目和页面使用(只针对我们的业务场景)      let data: any = {};  let text = word;
  if (fontlibfile) data.fontlibfile = fontlibfile;  if (text) data.word = text;  if (pageName) data.pageName = pageName;  if (key) data.key = key;
  data.fontUrl =`https://example.com/${text}.ttf`;
  if (!fontlibfile) throw new Error('字体库或key不存在');  try {    const cacheFile = path.join(__dirname, `./font/`);    // 用于存放下载下来的源字体包    if (!fs.existsSync(cacheFile)) {      fs.mkdirSync(cacheFile, {recursive: true});    } else {      log.info("临时存放目录已存在");    };    const filePath = await tempDownload(fontlibfile);  // 获取下载之后的源字体文件地址    const extname = path.extname(filePath);    const useTtfType = (extname === '.ttf' || extname === '.TTF') ? true : false;  //因为支持ttf和otf两种格式，需要区分一下    const fontmin = new Fontmin()      .src(filePath)      .use(useTtfType ? Fontmin.glyph({ text }) : Fontmin.otf2ttf({ text }))  //不管是ttf还是otf,最终我们都转成ttf格式
      const content:any = await new Promise((resolve, reject) => {        fontmin.run((error, files) => {          if (error) {            return reject(error);          }          return resolve(files[0].contents);        });      });    await writeFile(`${cacheFile}${text}.ttf`, content);    const file = fs.readFileSync(`${cacheFile}${text}.ttf`);    let res;    res = await IMGCLIENT.client.put(`dm_auto_config_server/${text}.ttf`, file); // 将压缩后得到的子集字体文件上传到cdn    fs.unlink(`${__dirname}/font/${text}.ttf`, (err) => {      if(err) {        log.info('删除文件失败');      };    });    return res.url; // 拿到压缩后的子集字体文件地址  } catch(error) {    throw new Error('字体文件压缩失败');  }}

    // 对文字去重以及排序    let text = Array.from(new Set(word))    .sort()    .join('');
    const textMd5 = `${key}_${md5(text)}`;  // 并将上面的代码中的text替换成textMd5    const exist = await GetFontManagByBufferName(`${textMd5}`); // 去数据库中差是否有缓存    if (exist !== null) {      throw new Error(`字体配置中已经存在了字体库为${fontlibName}key值为${key}的字体配置`);  // 直接去复制已有的文件就好了    }

// 编辑时入参增加 id:新建时生成的唯一值，bufferName：新建时生成的由key和textMd5组合而成
const textMd5 = id ? bufferName : `${key}_${md5(text)}`;

// 我们的资源是放在阿里云上的，查了api,发现api里有上传时强制不缓存的设置
res = await IMGCLIENT.client.put(`dm_auto_config_server/${textMd5}.ttf`, file, { headers: {'Cache-Control': 'no-cache, no-store, max-age=0, must-revalidate', 'Pragma': 'no-cache', 'Expires': -1} });