如果 HTML2Canvas 遵循 f，则不会在 chrome 中呈现“i”答案

【问题标题】：HTML2Canvas not rendering 'i' in chrome if it follows f如果 HTML2Canvas 遵循 f，则不会在 chrome 中呈现“i”
【发布时间】：2018-08-14 17:13:39
【问题描述】：

我对 HTML2Canvas 有一个非常奇怪的问题。如果 i 在 chrome 中跟随 f 并且将 f 大写，则它不会呈现字母 i。 Firefox 没有问题。

我不想更改字体，它是嵌入式字体（Ubuntu），也许这就是问题所在？

<script type="text/javascript">
var $loading = $('#loader').hide();
$('#carddownload').on('click', function() {
showimage(); 
});
$(document)
.ajaxStart(function () {
$loading.show();
})
.ajaxStop(function () {
$loading.hide();
});
function showimage(){
html2canvas([document.getElementById('card')], {
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;
});
}
});
}
</script>

【问题讨论】：

github.com/niklasvh/html2canvas/pull/1085

标签： javascript css google-chrome fonts html2canvas

【解决方案1】：

无论您使用的是谷歌字体还是嵌入字体，某些字体在 HTML2Canvas 中都无法正确呈现。我使用了不同的字体。 blue road rg.ttf 与 Ubuntu 类似。

【讨论】：

【解决方案2】：

您可以执行以下操作：

document.getElementById('card').style.fontFeatureSettings = '"liga" 0';

【讨论】：