如何编程判断Unicode字符是否可被已安装字体渲染？

嘿，这个需求很实用啊！我来帮你拆解这几个问题，分享一些在浏览器环境里可行的方案：

核心思路是：无法被系统/浏览器渲染的字符，会显示默认的「替换占位符」（�），我们可以通过对比目标字符和占位符的渲染尺寸来判断。

这里有个简单的实现代码：

function canRenderCharacter(char) {
  const testSpan = document.createElement('span');
  // 隐藏元素避免干扰页面
  testSpan.style.position = 'absolute';
  testSpan.style.visibility = 'hidden';
  testSpan.style.fontSize = '32px'; // 固定字号排除尺寸差异
  document.body.appendChild(testSpan);

  // 测量目标字符的尺寸
  testSpan.textContent = char;
  const targetSize = testSpan.getBoundingClientRect();

  // 测量替换占位符的尺寸
  testSpan.textContent = '�';
  const fallbackSize = testSpan.getBoundingClientRect();

  document.body.removeChild(testSpan);

  // 尺寸不同说明目标字符能被正常渲染
  return targetSize.width !== fallbackSize.width || targetSize.height !== fallbackSize.height;
}

// 使用示例：检测一个CJK扩展字符
console.log(canRenderCharacter('𠀋'));

⚠️ 注意：少数极端情况下，某些字体的占位符尺寸可能和目标字符巧合一致，但这个方法在绝大多数场景下都足够可靠。

浏览器出于安全限制，不能直接读取系统的完整字体列表，但有两种间接方式可以检测：

• 方法A：字体匹配检测
  创建一个测试元素，把你要检测的字体放在font-family第一位，后面跟一个肯定不存在的字体，再通过计算样式判断实际生效的字体：

function isFontInstalled(fontName) {
  const testSpan = document.createElement('span');
  testSpan.textContent = 'abcdefghijklmnopqrstuvwxyz0123456789';
  testSpan.style.fontSize = '24px';
  // 先指定目标字体，再兜底一个不存在的字体
  testSpan.style.fontFamily = `${fontName}, NonExistentFakeFont`;
  document.body.appendChild(testSpan);

  const computedFont = window.getComputedStyle(testSpan).fontFamily;
  document.body.removeChild(testSpan);

  // 如果计算结果包含目标字体名称，说明该字体已安装
  return computedFont.includes(fontName);
}

// 使用示例：检测Noto中日韩简体字体
console.log(isFontInstalled('Noto Sans CJK SC'));

• 方法B：使用queryLocalFonts() API（Chrome 74+）
  这个API可以请求用户授权后，获取系统字体的详细元数据，包括字体支持的字符范围（需要解析字体的cmap表）。不过实现起来比较复杂，适合对精度要求极高的场景。

其实这是最省心的方法——Noto字体的命名规则和Unicode的字符块/脚本高度对应，你完全可以提前做个映射表：

1. 先从你的Blocks.txt里找到字符范围对应的Unicode脚本（比如Basic Latin属于Latin脚本，CJK Unified Ideographs属于Han脚本）；
2. 然后对应到Noto的字体家族：
   • 通用脚本（Latin、Common等）：Noto Sans / Noto Serif
   • 中日韩字符：Noto Sans CJK SC（简体）、Noto Sans CJK TC（繁体）、Noto Sans CJK JP（日文）、Noto Sans CJK KR（韩文）
   • 阿拉伯文：Noto Sans Arabic
   • 希伯来文：Noto Sans Hebrew
   • 印度系脚本（如Devanagari、Tamil）：Noto Sans Devanagari、Noto Sans Tamil等

你可以提前把Blocks.txt里的每个块名称和对应的Noto字体做映射，工具加载时直接匹配，不用逐个字符检测，效率高很多。

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