如何在JS中动态加载字体文件？

在JavaScript中动态加载字体文件通常可以使用`fetch`或者`XMLHttpRequest`来请求外部字体文件，然后将它们转换为`FontFaceSet`对象。以下是使用`fetch`的一个简单示例：

// 假设我们有一个名为'my-font.ttf'的字体文件URL
const fontUrl = 'https://example.com/my-font.ttf';

// 创建一个Promise来异步加载字体文件
function loadFont(url) {
  return fetch(url)
    .then(response => response.arrayBuffer())
    .then(arrayBuffer => URL.createObjectURL(new Blob([arrayBuffer])))
    .then(fontUrl => {
      const fontFace = new FontFace('MyCustomFont', fontUrl);
      return fontFace.load();
    })
    .catch(error => console.error('Failed to load font:', error));
}

// 调用loadFont函数并注册回调
loadFont(fontUrl).then(() => {
  // 加载成功后，在文档内可以使用新字体
  document.fonts.add(fontFace).then(() => {
    // 使用已经加载的字体
    const myText = document.createElement('p');
    myText.textContent = '使用了我的新字体';
    myText.style.fontFamily = 'MyCustomFont, fallback-sans-serif';
    document.body.appendChild(myText);
  });
}).catch(err => {
  // 如果加载失败，可以在这里处理错误
});

在这个例子中，`loadFont`函数首先下载字体文件到内存，然后创建一个新的`FontFace`对象，最后将其添加到浏览器的字体集合中。一旦加载完成，就可以在页面上使用新的字体了。

请注意，浏览器对字体文件的管理可能会有延迟，所以需要处理可能出现的字体可用性检查。另外，`@font-face` CSS规则也可以用于定义和加载自定义字体，但在实际项目中更倾向于使用现代浏览器支持的`document.fonts` API。