如何使用JavaScript结合font-family获取HTML中正确的Unicode值？

你猜的没错，font-family: Symbol就是问题根源——Symbol字体内部对字符做了映射，文档里的\uf0b7会被渲染成通用项目符号\u2022（•），这是字体自身的字符映射规则导致的。

可以通过JavaScript结合font-family属性获取真实渲染的Unicode值，核心思路是用Canvas模拟不同字体下的字符渲染，通过视觉特征匹配对应的标准符号：

实现思路 #

1. 用Canvas分别渲染目标字符（\uf0b7）在Symbol字体下的像素数据
2. 用通用字体（比如Arial）渲染预定义的标准符号，对比两者的像素特征
3. 匹配成功后返回对应的标准Unicode值

示例代码 #

function getRenderedUnicode(char, targetFont) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = 20;
  canvas.height = 20;

  // 渲染目标字符（目标字体）
  ctx.font = `16px ${targetFont}`;
  ctx.clearRect(0, 0, 20, 20);
  ctx.fillText(char, 0, 16);
  const targetPixelCount = countNonTransparentPixels(ctx.getImageData(0, 0, 20, 20).data);

  // 遍历标准符号库匹配
  const standardSymbols = ['\u2022', '\u2023', '\u25E6', '\u25AA'];
  for (const symbol of standardSymbols) {
    // 渲染标准符号（通用字体）
    ctx.font = '16px Arial';
    ctx.clearRect(0, 0, 20, 20);
    ctx.fillText(symbol, 0, 16);
    const standardPixelCount = countNonTransparentPixels(ctx.getImageData(0, 0, 20, 20).data);

    if (targetPixelCount === standardPixelCount) {
      return symbol;
    }
  }

  // 无匹配则返回原字符
  return char;
}

// 辅助函数：统计非透明像素数量
function countNonTransparentPixels(imageData) {
  let count = 0;
  for (let i = 3; i < imageData.length; i += 4) {
    if (imageData[i] > 0) count++;
  }
  return count;
}

// 使用示例
const originalChar = '\uf0b7';
const actualRenderedChar = getRenderedUnicode(originalChar, 'Symbol');
console.log(actualRenderedChar); // 输出 • 对应 Unicode \u2022

补充方案 #

如果你的场景中符号范围固定，直接手动建立映射表会更高效，比如：

const symbolFontMap = {
  '\uf0b7': '\u2022',
  '\uf0a7': '\u25B6',
  // 按需添加其他映射
};

// 使用时直接取值
console.log(symbolFontMap['\uf0b7']); // 输出 •

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