动态加载外部字体【JS封装】

在现代网页设计中，使用自定义字体可以为页面带来更加丰富的视觉效果。本文将介绍如何通过 JavaScript 动态加载外部字体，并将其应用到网页中，以实现个性化的排版效果。

问题背景

许多网页设计师和开发者希望在网站中使用非标准字体，以获得更加独特的排版效果。然而，传统的字体加载方式可能无法满足动态加载外部字体的需求，因此需要一种灵活的解决方案。

解决方案

JavaScript 提供了一种动态加载外部字体的方法，通过 FontFace 对象和 Promise 对象，可以实现对外部字体的动态加载和应用。

// utils => init.js
function loadExternalFonts() {
  // 首先，我们定义一个包含要加载的字体信息的数组 `fontsToLoad`，
  // 每个字体信息包括字体名称（fontFamily）和字体文件的 URL（fontUrl）。
  // 在这个数组中，我们列出了需要加载的字体以及对应的字体文件路径。
  const fontsToLoad = [
    {
      fontFamily: "PingFangSC-Regular",
      fontUrl: `${window.MY_PROJECT.VUE_APP_VENDORS}/PingFang/PingFang Regular.ttf`,
    },
    {
      fontFamily: "PingFangSC-Medium",
      fontUrl: `${window.MY_PROJECT.VUE_APP_VENDORS}/PingFang/PingFang Medium.ttf`,
    },
    {
      fontFamily: "PingFang Bold",
      fontUrl: `${window.MY_PROJECT.VUE_APP_VENDORS}/PingFang/PingFang Bold.ttf`,
    },
  ];
  
  // 使用 `map` 方法遍历 `fontsToLoad` 数组，并为每个字体创建一个 FontFace 对象
  // 并调用 `load` 方法加载字体文件，返回一个 Promise 对象。
  // 这里使用了 ES6 的模板字符串来拼接字体文件的路径。
  const fontPromises = fontsToLoad.map(function (font) {
    const fontFace = new FontFace(font.fontFamily, `url('${font.fontUrl}')`);
    return fontFace.load();
  });

  // 使用 `Promise.all` 方法等待所有字体加载的 Promise 对象都被 resolve（加载完成）
  // 然后执行 `then` 方法中的回调函数，将加载完成的字体依次添加到 `document.fonts` 中。
  Promise.all(fontPromises)
    .then(function (loadedFonts) {
      loadedFonts.forEach(function (font) {
        document.fonts.add(font);
      });
    })
    .catch(function (error) {
      console.error("Font loading failed:", error);
    });
}

export default [loadExternalFonts];

// main.ts
// 初始化
import initList from "@/utils/init.js";
initList.forEach((e) => e && e());

最后

动态加载外部字体是网页设计中常用的技术之一，了解这个方案可以让我们的页面更具吸引力和个性化

水平有限，还不能写到尽善尽美，希望大家多多交流，跟春野一同进步！！！