HTML2Canvas在Chrome中f后i不渲染且f大写的问题求助

这确实是个挺让人头疼的诡异bug，我之前在处理web字体和html2canvas的兼容性时也碰到过类似情况——Chrome对某些字体的连字（ligature）处理逻辑和Firefox不一样，导致html2canvas渲染时出现字形丢失或变形的问题，你用的Ubuntu字体里刚好包含"fi"的连字字形，这大概率就是问题根源。

给你几个不用换字体就能解决的方案，按优先级试试：

1. 禁用字体连字功能（最推荐） #

直接给需要渲染的文本元素或父容器添加CSS样式，强制关闭字体的连字特性，这样Chrome就不会把"fi"当成单个字形处理了：

#card, .tcgnamecell {
  font-variant-ligatures: none;
  /* 兼容旧版浏览器的备选写法 */
  font-feature-settings: "liga" 0, "clig" 0;
}

把这段样式加到你的页面样式表或者<style>标签里就行，不需要修改JS代码，最省心。

2. 调整html2canvas的渲染配置 #

如果禁用连字没生效，试试在html2canvas的调用参数里添加letterRendering: true，这个参数会强制html2canvas逐个渲染每个字母，避免连字相关的渲染异常：

function showimage(){
  html2canvas([document.getElementById('card')], {
    letterRendering: true, // 新增这个配置
    onrendered: function(canvas) {
      // 原有的代码不变...
      var name = $(".tcgnamecell").html();
      var n = name.indexOf("<br>");
      var data = {};
      data['name'] = name.substr(0);
      data['img'] = canvas.toDataURL();
      var n = data['name'].indexOf("<br>");
      $.post("save.php", {image: data}, function (file) {
        window.location.href ="download.php?path=" + file;
      });
    }
  });
}

3. 手动拆分"fi"组合（兜底方案） #

如果上面两个方法都不管用，可以在处理文本的时候，把所有"fi"替换成"f"加上零宽空格，让浏览器无法识别为连字：

function showimage(){
  html2canvas([document.getElementById('card')], {
    onrendered: function(canvas) {
      var name = $(".tcgnamecell").html();
      // 新增替换逻辑
      name = name.replace(/fi/g, 'f​i');
      var n = name.indexOf("<br>");
      var data = {};
      data['name'] = name.substr(0);
      data['img'] = canvas.toDataURL();
      var n = data['name'].indexOf("<br>");
      $.post("save.php", {image: data}, function (file) {
        window.location.href ="download.php?path=" + file;
      });
    }
  });
}

零宽空格(​)不会影响文本的视觉显示，但能强制拆分连字组合，让html2canvas正确渲染每个字母。

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