Unicode字符数组转字符串后Fontmin调用异常问题排查

核心问题出在字符转换的准确性或字符串拼接的隐形差异上，以下是具体排查点和解决办法：

1. 代理对字符处理错误 #

FontAwesome部分新图标使用UTF-16代理对（代码点大于U+FFFF，比如U+1F600这类表情风格图标），String.fromCharCode只能处理单个16位代码点，会把代理对拆成两个无效字符——控制台可能因浏览器自动修复显示正常，但Fontmin无法识别这些无效字符。

解决办法：
把String.fromCharCode替换为String.fromCodePoint，它支持处理全范围的Unicode代码点：

// 原代码
// const char = String.fromCharCode(parseInt(unicodeHex, 16));
// 修改后
const char = String.fromCodePoint(parseInt(unicodeHex, 16));

2. Unicode转换时未指定基数 #

解析CSS中的Unicode（如\f007）时，若调用parseInt未传入第二个参数16，当十六进制字符串以0开头时，会被错误解析为八进制，导致生成错误字符。

解决办法：
确保转换时明确指定十六进制基数：

// 提取CSS中的十六进制部分（如从"\f007"取出"f007"）
const unicodeHex = 'f007';
const codePoint = parseInt(unicodeHex, 16); // 必须加第二个参数16

3. 字符串拼接的隐形空白问题 #

数组转字符串时，可能引入首尾空格或不可见空白字符（如换行、制表符），而直接写的字面量字符串没有这些冗余内容，Fontmin.glyph对输入格式要求严格，会把冗余空白视为无效字符。

解决办法：

• 拼接后去除首尾空白：

const glyphListStr = charArray.join(' ').trim();

• 更可靠的方式：直接传递字符数组给Fontmin.glyph，跳过字符串拼接步骤：

fontmin.glyph({ glyphs: charArray });

排查验证步骤 #

可以通过以下代码对比变量和字面量的差异：

// 假设你的字面量字符串是literalStr
console.log(glyphListStr === literalStr); // 若为false，说明两者内容不同
// 逐个对比字符的代码点
const arr1 = Array.from(glyphListStr);
const arr2 = Array.from(literalStr);
arr1.forEach((char, index) => {
  if (char !== arr2[index]) {
    console.log(`差异位置${index}: 变量字符码点${char.codePointAt(0)}, 字面量字符码点${arr2[index].codePointAt(0)}`);
  }
});

内容的提问来源于stack exchange，提问作者Ronan L.