失效原因一：fillText繪製文本時，字體文件尚未加載完成
解決方案
1、壓縮字體
2、.ttf轉成.woff2，可搜索在線ttf轉woff2網站轉換 https://www.fontke.com/tool/convfont/
3、window.onload
示例代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>canvas</title>
<style>
body {
margin: 0;
}
@font-face {
font-family: yanzhenqing;
src: url("顏體書法.woff2");
}
#cvs {
border: 1px solid red;
}
.cs {
font-size: 30px;
font-family: yanzhenqing;
}
</style>
</head>
<body>
<div class="cs">如果onload不生效，可嘗試canvas前添加使用該字體的文本，並且不能使用display none隱藏</div>
<canvas id="cvs" width="300" height="500"></canvas>
<script>
window.onload = function () {
let c = document.getElementById("cvs");
let ctx = c.getContext("2d");
ctx.font = "30px yanzhenqing";
ctx.fillText("文本內容文本內容", 0, 30);
};
</script>
</body>
</html>
4、canvas標籤前必須要加使用過該字體樣式的文本，可設置透明度或者高度隱藏，display none不生效