Style Dictionary 项目中 Base64 编码字体文件的问题解析

在 Style Dictionary 项目中处理字体文件时，开发者可能会遇到一个常见的技术问题：当尝试将字体文件转换为 Base64 编码时，系统会抛出"InvalidCharacterError"错误。这个问题在 Windows 环境下尤为常见，特别是在使用 npm 本地运行构建命令时。

问题现象

当开发者尝试将字体文件（无论是来自 Google Fonts 还是项目示例中的字体）转换为 Base64 编码时，会遇到以下错误提示：

DOMException [InvalidCharacterError]: Invalid character

错误发生在 Node.js 的 buffer 模块中，表明在转换过程中遇到了无效字符。这个问题与文件编码无关，即使开发者尝试将文件转换为 UTF-8 编码也无法解决。

问题根源

这个问题的根本原因在于 Style Dictionary 当前使用的 Base64 转换方法不完全兼容 Node.js 环境。原始的转换逻辑可能更适合浏览器环境，而在 Node.js 中处理二进制文件（如字体文件）时需要采用不同的方法。

解决方案

针对这个问题，有两种可行的解决方案：

1. 修改转换逻辑： 在 Node.js 环境中，应该使用 Buffer 对象来处理二进制文件的 Base64 编码。一个更健壮的实现方式应该区分 Node.js 和浏览器环境：

   const body = fs.readFileSync(filePath);
   const toBase64 = buffer => {
     if (typeof window !== 'object') {
       // Node.js 环境下使用 Buffer
       return Buffer.from(buffer).toString('base64');
     } else {
       // 浏览器环境下使用 FileReader 和 Blob
       const reader = new FileReader();
       const blob = new Blob([body]);
       reader.readAsDataURL(blob);
       return new Promise(resolve => {
         reader.onloadend = () => {
           resolve(reader.result);
         };
       });
     }
   };
   const b64String = toBase64(body);
   

2. 替代方案： 另一种解决方法是保持字体文件作为普通资源文件，让最终的应用在运行时进行 Base64 编码。这种方法有几个优势：

   • 减少了构建过程的复杂性
   • 使字体文件更易于管理和更新
   • 避免了构建时可能出现的编码问题

最佳实践建议

对于处理二进制资源文件（如字体）的 Base64 编码，建议开发者：

1. 明确区分开发环境和运行环境
2. 对于 Node.js 构建过程，优先使用 Buffer 处理二进制文件
3. 考虑将资源编码工作推迟到运行时，特别是当资源较大时
4. 对于跨平台项目，确保编码逻辑在两种环境下都能正常工作

这个问题提醒我们，在处理文件编码和转换时，必须考虑执行环境的差异，特别是在现代前端工具链中，代码可能同时在 Node.js 和浏览器环境中运行。