基于 new FontFace 加载

2024年08月06日

柏拉文

越努力，越幸运

一、认识

---

二、动态加载字体文件

---

解决方案: 在 Javascript层面，浏览器也提供了 CSS Font Loading API 来操作字体。它在大部浏览器中已经得到了支持。通过 JS API 可以比较方便的控制页面的呈现。可以在字体加载前做些交互上的优化等

具体实现

const lazyLoadFontFamily = (fontFamily: string) => {
    if (!fontFamily) {
        return;
    }

    const newFont = new FontFace(fontFamily, `url("${currentCdnUrl}custom-course-cover/fonts/${fontFamily}.ttf")`);

    document.fonts.add(newFont);
};

三、动态加载具体字体

---

解决方案: 在 Javascript层面，浏览器也提供了 CSS Font Loading API 来操作字体。它在大部浏览器中已经得到了支持。通过 JS API 可以比较方便的控制页面的呈现。可以在字体加载前做些交互上的优化等

实现如下:

Web

const lazyLoadFontFamily = (fontFamily: string) => {
    if (!fontFamily) {
        return;
    }

    const newFont = new FontFace(fontFamily, `url("http://xxxx:8080/fontmin?font=${fontname}&text=${encodeURIComponent(text)}")`);

    document.fonts.add(newFont);
};

通过 JavaScript 添加一个 CSS 样式。浏览器会自行解析并在下载完成字体后显示中文字体。

Node

var Fontmin = require('fontmin');
const path = require('path');

module.exports = function(req, res, next) {
  // 字体源文件
  var srcPath = path.join(__dirname, '../../static/huiwenmingchao.otf'); 
  var text = req.query.text;

  // 文字去重
  var textArr = Array.from(new Set(text.split('')));
  text = textArr.join('');

  // 初始化
  var fontmin = new Fontmin().src(srcPath).use(
    // 字型提取插件
    Fontmin.glyph({
      text: text // 所需文字
    })
  );

  fontmin.run(function(err, files, stream) {
    if (err) {
      // 异常捕捉
      console.error(err);
    }
    res.send(files[0].contents);
  });
};

基于express框架实现一个API，动态字体从参数传入，路由中使用fontmin模块对字体进行抽取，抽取后的buffer直接返回给前端。

参考方案

---

动态中文字体加载方案