如何解决即使字体已完成加载,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 举报,一经查实,本站将立刻删除。