IE及Edge中Canvas渲染CJK通用字体与DOM不一致问题问询

我之前也碰到过一模一样的问题——在IE11和旧版Edge里，用Canvas的fillText渲染16px serif这类通用字体时，结果总是和同样式的DOM元素对不上，尤其是CJK文本（比如你提到的浠婃棩銇�），哪怕页面设置了lang="ja"也没用。核心原因就是你说的：Canvas元素不会像DOM那样遵循页面的lang属性，导致字体选择逻辑走了不同的分支，而标准浏览器已经修复了这个问题。

针对你的需求（要么让二者渲染一致，要么能程序化检测差异），我整理了几个可行的方案：

1. 手动给Canvas设置语言环境（最直接的对齐方案） #

IE11和旧版Edge支持一个微软专属的非标准属性textLanguage，可以直接给Canvas上下文设置对应语言，让它的字体选择逻辑和DOM对齐：

const canvas = document.getElementById('your-canvas');
const ctx = canvas.getContext('2d');

// 和页面的lang属性保持一致，比如这里设为日语
ctx.textLanguage = 'ja';
ctx.font = '16px serif';
ctx.fillText('浠婃棩銇�', 10, 50);

设置之后，Canvas就会按照指定的语言来选择通用字体，和DOM的渲染结果基本一致。

2. 通过尺寸/像素对比检测渲染差异 #

如果因为某些原因无法用textLanguage属性对齐，或者你需要程序化验证二者是否存在差异，可以用以下两种方式：

方式A：对比文本宽度 #

Canvas的measureText方法会返回文本的渲染宽度，而DOM元素的offsetWidth是实际渲染后的宽度。如果二者差异超过一个小阈值（比如1px），就说明字体选择不一致：

function checkFontMatch(text, font, lang) {
  // 创建隐藏的DOM元素
  const domSpan = document.createElement('span');
  domSpan.textContent = text;
  domSpan.style.font = font;
  domSpan.style.visibility = 'hidden';
  domSpan.style.position = 'absolute';
  domSpan.lang = lang;
  document.body.appendChild(domSpan);

  // 测量Canvas文本宽度
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  ctx.font = font;
  ctx.textLanguage = lang; // 尽量对齐
  const canvasWidth = ctx.measureText(text).width;

  // 对比宽度
  const domWidth = domSpan.offsetWidth;
  const isMatch = Math.abs(canvasWidth - domWidth) < 1; // 允许1px误差

  // 清理DOM
  document.body.removeChild(domSpan);
  return isMatch;
}

// 示例调用
const match = checkFontMatch('浠婃棩銇�', '16px serif', 'ja');
console.log('Canvas与DOM字体是否匹配:', match);

方式B：像素级对比（更精准） #

如果宽度对比不够精准，可以通过像素级对比验证：

1. 创建一个隐藏的DOM元素，应用相同样式和文本
2. 把DOM元素转成图片（用SVG中转，IE11支持）
3. 在两个Canvas分别绘制文本和DOM图片，对比像素数据

示例代码（适配IE11）：

function pixelMatchCanvasAndDOM(text, font, lang) {
  // 1. 准备DOM元素
  const domEl = document.createElement('span');
  domEl.textContent = text;
  domEl.style.font = font;
  domEl.style.backgroundColor = '#fff';
  domEl.style.color = '#000';
  domEl.lang = lang;
  domEl.style.position = 'absolute';
  domEl.style.left = '-9999px';
  document.body.appendChild(domEl);

  // 2. 创建SVG来转换DOM为图片
  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  svg.setAttribute('width', domEl.offsetWidth);
  svg.setAttribute('height', domEl.offsetHeight);
  const foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
  foreignObject.setAttribute('width', '100%');
  foreignObject.setAttribute('height', '100%');
  foreignObject.appendChild(domEl.cloneNode(true));
  svg.appendChild(foreignObject);

  // 3. 转换SVG为DataURL，再创建图片
  const svgData = new XMLSerializer().serializeToString(svg);
  const img = new Image();
  img.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svgData);

  return new Promise((resolve) => {
    img.onload = () => {
      const canvas1 = document.createElement('canvas');
      const ctx1 = canvas1.getContext('2d');
      const canvas2 = document.createElement('canvas');
      const ctx2 = canvas2.getContext('2d');

      // 设置画布尺寸
      const w = img.width;
      const h = img.height;
      canvas1.width = canvas2.width = w;
      canvas1.height = canvas2.height = h;

      // Canvas1绘制文本
      ctx1.font = font;
      ctx1.textLanguage = lang;
      ctx1.fillText(text, 0, h - 4); // 调整位置对齐DOM

      // Canvas2绘制DOM转的图片
      ctx2.drawImage(img, 0, 0);

      // 对比像素
      const data1 = ctx1.getImageData(0, 0, w, h).data;
      const data2 = ctx2.getImageData(0, 0, w, h).data;
      let isMatch = true;
      for (let i = 0; i < data1.length; i += 4) {
        if (data1[i] !== data2[i] || data1[i+1] !== data2[i+1] || data1[i+2] !== data2[i+2] || data1[i+3] !== data2[i+3]) {
          isMatch = false;
          break;
        }
      }

      // 清理
      document.body.removeChild(domEl);
      resolve(isMatch);
    };
  });
}

// 示例调用
pixelMatchCanvasAndDOM('浠婃棩銇�', '16px serif', 'ja').then((match) => {
  console.log('像素级匹配结果:', match);
});

3. Fallback：直接指定具体字体 #

如果以上方案都无法满足需求，最稳妥的方式是绕过通用字体，直接指定对应语言的具体字体。比如针对日语，可以写：

// DOM和Canvas都用相同的具体字体列表
const font = '16px "MS Mincho", "Meiryo", serif';
// DOM元素样式
domEl.style.font = font;
// Canvas上下文
ctx.font = font;

这样二者都会优先选择指定的具体字体，避免通用字体选择逻辑的差异。

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