html自定义字体无效,canvas自定义字体失效

失效原因一：fillText绘制文本时，字体文件尚未加载完成

字体文件4.2M，加载时长23ms

解决方案

1、压缩字体

2、.ttf转成.woff2，可搜索在线ttf转woff2网站转换 https://www.fontke.com/tool/convfont/

3、window.onload

示例代码

canvas

body {

margin: 0;

}

@font-face {

font-family: yanzhenqing;

src: url("颜体书法.woff2");

}

#cvs {

border: 1px solid red;

}

.cs {

font-size: 30px;

font-family: yanzhenqing;

}

如果onload不生效，可尝试canvas前添加使用该字体的文本，并且不能使用display none隐藏

window.onload = function () {

let c = document.getElementById("cvs");

let ctx = c.getContext("2d");

ctx.font = "30px yanzhenqing";

ctx.fillText("文本内容文本内容", 0, 30);

};

4、canvas标签前必须要加使用过该字体样式的文本，可设置透明度或者高度隐藏，display none不生效