即使字体已完成加载，Canvas中的字体也会更改

问题描述

对于Canvas和自定义字体遇到的这个问题，我已经花了一段时间了。

我正在使用web font loader从google加载我的网络字体，但是在第一次和第二次重绘之间某些字形仍然发生变化。重绘功能可以在任何时间发生，在本示例中，它是由按钮触发的，但是第一次看上去总是与第二次不同。

鉴于上述前提，我认为这不是一个加载问题。我认为这是由于字体文件中缺少字符而造成的。 由于性能原因，浏览器第一次抛出随机字体，并启动异步后备字体查询。可以吗？

这里是minimal reproducible example：请确保没有使用任何缓存：

WebFont.load({
    classes: false,google: {
        families: [
            "Open Sans"
        ]
    },active: () => {
        (document.querySelector("button") as HTMLButtonElement).addEventListener("click",() => {
            refresh();
        });
    }
});


function refresh() {
    let canvas = document.querySelector("#canvas") as HTMLCanvasElement;
    let ctx = canvas.getContext("2d") as CanvasRenderingContext2D;

    ctx.fillStyle = "black";
    ctx.fillRect(0,canvas.width,canvas.height);
    ctx.font = "12pt Open Sans";
    ctx.fillStyle = "white";

    let step = 20;
    let charset = "ªº¿⌐¬½¼¡«»░▒▓│┤╡╢╖╕╣║╗╝╜╛┐└┴┬├─┼╞╟╚╔╩╦╠═╬╧╨╤╥╙╘╒╓╫╪┘┌█▄▌▐▀αßΓπΣσµτΦΘΩδ∞φε∩≡±≥≤⌠⌡÷≈°∙·√ⁿ²■□";
    for (let x = 0,y = 0,i = 0; i < charset.length; x += step,i++) {
        if (x + step > canvas.width) {
            x = 0;
            y += step;
        }
        ctx.fillText(textStyle(charset.charat(i)),x + step / 2,y + step / 2);
    }
}

function textStyle(s: string): string {
    return s.replace(/./g,"$&\uFE0E");
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）