【NodeJS & JS】动态加载字体的各方式及注意事项；

首先加载字体这个需求基本只存在于非系统字体，系统已有字体不需要加载即可直接使用； 

• 方案1：创建 style 标签，写入 @font-face{font-family: 'xxx';src: url('xxx')} 等相关字体样式；将style标签添加到body里；
• 方案2：通过 new FontFace() 进行字体加载，然后通过相关API进行检测加载情况；

---

 

---

方案1的适用场景：适合一次性加载所需字体；自己对应功能读取字体结构信息不依赖浏览器的真实加载情况；对加载字体的延迟情况无要求；

方案2的适用场景：适合完全加载好字体再执行某功能，避免字体还原显示异常（例如我项目所用的fabric库的相关字体功能）；适合按需加载字体；能完全掌握字体加载流程，提高代码可读性、功能可控性；

---

 代码示例仅以本人electron+vite+vue3的项目应用为例，就算是在web用也简单改下就完事了，核心一点没变；

并且案例仅以本地静态字体资源为例，不做过多的其他场景的案例代码分析省点字，如果是http请求拿到的字体资源，碰到数据格式与例子不一致的情况下，自行了解如何转为所需的格式；

方案1：通过style标签加载字体

import { basename, extname } from 'path-browserify';

const localFonts = import.meta.glob('/public/fonts/*.*');

function getFontName(fontPath: string) {
    return basename(fontPath.replace(/\\/g, '/')).slice(0, -extname(fontPath).length);
}
function loadLocalFonts() {
  // 处理软件自带的字体资源
  const fontStyle = document.createElement('style');
  let fontFace = '';
  Object.keys(localFonts).forEach((font) => {
    // 打包后路径不需要/public,所以要去掉
    font = font.replace('/public', '');

    const fontName = fontStore.getFontName(font);

    fontFace += `@font-face{font-family: '${fontName}';src: url('${font}')}\n`;
  });
  fontStyle.innerText = fontFace;
  document.body.appendChild(fontStyle);
}

---

方案2：通过 new FontFace() 进行字体加载

import { readFileSync, readdirSync } from 'fs';
import { isArrayBuffer } from 'lodash-es';

function isFontFile(filename: string) {
  const fontExtensions = /\.(ttf|otf|woff|woff2|eot)$/i;
  return fontExtensions.test(filename);
}

  async getDownloadFont() {

    // 获取保存字体的路径，此案例是非自己项目内自带的字体，按需自己改该行代码即可；
    const filePath = await ipcRenderer.invoke('GET_FONT_PATH');

    const files = readdirSync(filePath);
    const fontList: any[] = [];
    files.forEach((val) => {
      if (isFontFile(val)) {
        const data = readFileSync(join(filePath, val).replace(/\\/g, '/'));
        const arrayBuffer = new Uint8Array(data).buffer;
        if (isArrayBuffer(arrayBuffer)) {
          fontList.push({
            path: join(filePath, val).replace(/\\/g, '/'),
            name: val,
            buffer: arrayBuffer,
          });
        }
      }
    });
    return fontList;
  }

import { basename, extname } from 'path-browserify';


function getFontName(fontPath: string) {
    return basename(fontPath.replace(/\\/g, '/')).slice(0, -extname(fontPath).length);
}
function setDownloadedFontList() {
  window.electron?.Font?.getDownloadFont().then((res: any[]) => {
    res.forEach((val) => {
        const fontName = getFontName(val.name);
        const font = new FontFace(fontName, val.buffer);
        (document as any).fonts.add(font);
        font.loaded.then(() => {
          if (document.fonts.check(`12px ${fontName}`)) {
            // 加载完成！！！
          }
        });
    });
  });
}