PDFME项目中CJK字体渲染问题的解决方案

2025-06-26 00:18:15作者：晏闻田Solitary

在PDFME项目的UI组件使用过程中，开发者发现了一个关于CJK（中日韩）字符渲染的重要问题。当使用不包含CJK字形的字体（如Roboto）时，浏览器会通过字体回退机制显示这些字符，但最终生成的PDF文件却无法正确渲染这些字符，导致显示不一致的问题。

问题现象分析

这个问题的核心在于浏览器和PDF生成引擎对字体处理机制的差异。在浏览器环境中，当指定字体缺少某些字符时，浏览器会自动回退到系统字体来显示这些字符。这种机制虽然保证了内容的可读性，但掩盖了字体本身不支持这些字符的事实。

而在PDF生成过程中，PDFME使用的是严格的字体嵌入机制。如果指定的字体文件中不包含某些字符的字形，这些字符将不会被渲染，最终在PDF中表现为空白或缺失。

技术背景

现代浏览器采用复杂的字体匹配算法来实现字符显示。当主字体缺少某些字符时，浏览器会按照以下顺序尝试：

检查主字体是否包含该字符
如果不存在，查找font-family列表中下一个字体
最终回退到系统默认字体

PDF生成则不同，它通常严格使用指定的字体文件，不会自动回退到其他字体。这种差异导致了UI预览和最终PDF输出不一致的情况。

解决方案设计

为了解决这个问题，我们设计了一个技术方案来主动检测字体对字符的支持情况，并在UI中明确显示不支持的字符。该方案包含以下关键技术点：

字体支持检测：通过Canvas API测量字符在不同字体下的渲染宽度，判断主字体是否真正支持该字符
字符替换机制：对于不支持的字符，使用Unicode符号"□"（俗称"豆腐块"）替代显示
异步处理：等待字体加载完成后再执行检测，确保结果准确

实现细节

核心实现使用了Canvas的measureText方法进行字体支持检测：

function supportsFont(char, font) {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  const defaultFont = 'sans-serif';

  context.font = `72px ${defaultFont}`;
  const defaultWidth = context.measureText(char).width;

  context.font = `72px ${font}, ${defaultFont}`;
  const customWidth = context.measureText(char).width;

  return defaultWidth !== customWidth;
}

字符替换逻辑则遍历文本内容，对每个字符进行检测：

function replaceUnsupportedChars(element, font) {
  const text = element.innerText;
  const newContent = text
    .split('')
    .map((char) =>
      supportsFont(char, font)
        ? char
        : `<span class="tofu">&#9633;</span>`
    )
    .join('');
  element.innerHTML = newContent;
}