WOFF字体转base64嵌入CSS显示异常，如何正确完成转换？

WOFF属于二进制格式文件，你原转换逻辑中先将读取到的二进制Buffer转为UTF-8字符串的操作会破坏原始字节数据，导致最终生成的Base64编码对应内容和原字体文件不一致，因此字体显示异常。

直接读取字体文件为Buffer后直接转Base64即可，无需做多余的编码转换：

const fs = require('fs');
const path = require('path');

// 填写你的WOFF字体文件名
const fontFileName = 'output.woff';
// 直接读取文件为二进制Buffer
const fontBuffer = fs.readFileSync(path.join(__dirname, fontFileName));
// 生成可直接嵌入CSS的Base64字符串
const fontBase64 = fontBuffer.toString('base64');

注意字体是二进制资源，Data URI中不需要加charset=utf-8字段：

@font-face {
    font-family: 'M PLUS 2';
    src: url(data:font/woff;base64,<<替换为上述生成的fontBase64内容>>) format('woff');
}

将生成的完整data:font/woff;base64,xxx字符串粘贴到浏览器地址栏访问，若能正常下载到和原文件大小一致的WOFF字体文件，即说明转换成功。

内容的提问来源于stack exchange，提问作者Akash Srinivas