html2canvas渲染含fi字母组合文本时字体异常问题求助

我之前也碰到过html2canvas处理字体连字（ligature）的坑，尤其是fi、fl这类常见的字母组合，这本质是因为多数西文字体默认会把fi合并成一个连字字符，而html2canvas在DOM转Canvas的过程中，对这种特殊字符的识别容易出问题。给你几个实用的解决方案：

• 禁用字体连字（最推荐）
  通过CSS直接关闭目标元素的连字渲染，让fi以两个独立字母的形式显示，html2canvas就能正常捕获了。给你的div添加如下样式：

  .your-target-div {
    font-variant-ligatures: none;
    /* 兼容旧浏览器可以再加下面这行 */
    font-feature-settings: "liga" 0;
  }
  

• 手动拆分连字（适合静态文本）
  如果没法修改CSS，可以在文本内容里给fi中间插入零宽空格（​），比如把fifteen改成f​ifteen。零宽空格不会影响页面显示，但会让浏览器把f和i当成两个独立字符，避免合成连字。

• 调整html2canvas配置并确保字体加载完成
  有时候自定义字体未完全加载就调用html2canvas，也会导致渲染异常。可以先监听字体加载完成事件，再执行截图：

  // 假设你用的是自定义字体，先监听加载
  document.fonts.ready.then(() => {
    html2canvas(document.querySelector('.your-target-div'), {
      scale: 2, // 提高缩放比例提升清晰度，也能改善字符渲染
      useCORS: true
    }).then(canvas => {
      // 处理生成的canvas
      document.body.appendChild(canvas);
    });
  });
  

如果以上方法都没解决，也可以试试替代库比如dom-to-image，但html2canvas的这几个方案应该能覆盖绝大多数fi连字渲染的问题。

内容的提问来源于stack exchange，提问作者Assad Ullah Ch