在浏览器JavaScript中加载动态生成的WOFF2字体文件可行吗？

完全可以直接在浏览器中加载JavaScript生成的WOFF2二进制数据，不需要先托管到任何服务器。下面是两种常用的实现方式：

方法一：Blob + Object URL（推荐） #

这是处理二进制字体文件最高效的方式，步骤很简单：

1. 把你生成的WOFF2二进制数据（比如ArrayBuffer或Uint8Array）包装成Blob对象，指定MIME类型为font/woff2
2. 用URL.createObjectURL()生成一个浏览器本地的临时URL
3. 在CSS的@font-face里用这个URL作为字体源

示例代码：

// 假设woff2Data是你生成的Uint8Array格式WOFF2数据
const woff2Blob = new Blob([woff2Data], { type: 'font/woff2' });
const fontUrl = URL.createObjectURL(woff2Blob);

// 动态创建样式并添加到页面
const styleTag = document.createElement('style');
styleTag.textContent = `
  @font-face {
    font-family: 'MyGeneratedFont';
    src: url(${fontUrl}) format('woff2');
    font-weight: normal;
    font-style: normal;
  }
`;
document.head.appendChild(styleTag);

// 现在就能在页面里用这个字体了
document.body.style.fontFamily = 'MyGeneratedFont, sans-serif';

// 不用的时候记得释放内存
// URL.revokeObjectURL(fontUrl);

方法二：Data URL（适合小字体） #

如果你的WOFF2文件体积很小，可以把二进制数据转成base64编码的Data URL，直接嵌入CSS：

// 将Uint8Array转成base64字符串
const base64Str = btoa(String.fromCharCode(...woff2Data));
const dataUrl = `data:font/woff2;base64,${base64Str}`;

// 应用到字体样式
const styleTag = document.createElement('style');
styleTag.textContent = `
  @font-face {
    font-family: 'MyGeneratedFont';
    src: url(${dataUrl}) format('woff2');
  }
`;
document.head.appendChild(styleTag);

注意：base64编码会让数据体积增加约30%，大字体文件不建议用这种方法。

几个注意点 #

• 一定要保证生成的WOFF2数据格式正确，不然浏览器没法解析
• 用Object URL的话，不用的时候记得调用URL.revokeObjectURL()释放内存，避免内存泄漏
• 部分老旧浏览器可能不支持WOFF2，有需要的话可以加个字体格式降级（比如同时提供WOFF格式）

内容的提问来源于stack exchange，提问作者Mikko Ohtamaa