不能，fontfaceset.load() 仅触发加载而不保证字体就绪；真正可靠的就绪信号是 document.fonts.ready，它在字体完成加载、解析和注册后才 resolve，需 await 此 promise 再执行 canvas 绘图。
FontFaceSet.load() 能否阻塞 Canvas 绘图？不能，但可主动等待
直接调用 ctx.font = "24px 'Noto Sans SC'" 后立刻 fillText()，若字体尚未就绪，Canvas 会回退到默认字体（如 sans-serif），且不报错、不重绘——这是最隐蔽的“字体失效”。FontFaceSet.load() 返回 Promise，但它只保证字体资源加载完成，**不保证浏览器已将该字体纳入可用字体集缓存**。必须配合 document.fonts.ready 或显式检查 status。
-
FontFaceSet.load()是“触发加载”，不是“等待就绪”；它 resolve 时字体可能仍在解析或未注册进渲染管线 - 真正可靠的就绪信号是
document.fonts.readyPromise，它在所有待加载字体完成加载+解析+注册后才 resolve - 若只加载单个字体，也可用
document.fonts.check('24px "Noto Sans SC"')轮询，但不如ready简洁
如何用 document.fonts.ready 安全触发 Canvas 绘图
关键不是“监听”，而是“等待就绪后再执行绘图逻辑”。把 Canvas 渲染封装成函数，等 document.fonts.ready resolve 后再调用：
<pre class="brush:php;toolbar:false;">async function drawWithCustomFont() {
// 确保字体已声明（CSS 中 @font-face 或 JS 中 new FontFace）
const font = new FontFace('Noto Sans SC', 'url(/fonts/NotoSansSC-Regular.woff2)');
document.fonts.add(font);
<p>// 等待字体真正就绪（含加载、解析、注册）
await document.fonts.ready;</p><p>const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.font = '24px "Noto Sans SC"';
ctx.fillText('你好，Canvas！', 50, 50);
}</p><p>drawWithCustomFont();</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5961" title="Markdown Canvas"><img
src="https://img.php.cn/upload/skill/000/000/081/179074273835215.jpg" alt="Markdown Canvas" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5961" title="Markdown Canvas" class="overflowclass">Markdown Canvas</a>
<p class="overflowclass">将Markdown文件转换为美观的HTML页面，适用于Canvas或浏览器查看。用于用户请求渲染、可视化、显示或分享Markdown文件时。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5961" title="Markdown Canvas" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
- 必须先
document.fonts.add()，否则document.fonts.ready不会等待该字体 - 若字体已在 CSS 中通过
@font-face声明，可跳过add()，但需确保 CSS 已加载（如放在） -
await document.fonts.ready是最简方式；不要用document.fonts.onloadingdone，该事件已被废弃
为什么 ctx.font = '...' 后立即 fillText() 仍可能失败
Canvas 的字体匹配发生在绘制帧提交时刻，而非设置 ctx.font 时。即使字体文件已下载完，浏览器也可能因排版引擎未完成字体元数据解析而临时降级。这种降级不可逆——同一帧内多次 fillText() 都会用降级字体，除非强制触发新帧（如 requestAnimationFrame）。
- 常见错误：在
DOMContentLoaded里设置字体 + 绘图，但此时document.fonts.ready尚未 resolve - 更隐蔽的问题：字体文件返回 200 但内容损坏，
document.fonts.load()仍 resolve，但document.fonts.ready会拒绝（reject），需加catch - 移动端 WebKit（iOS Safari）对
document.fonts.ready支持稳定，但旧 Android WebView 可能无此 API，需降级为定时轮询check()
兼容性与兜底方案：旧浏览器如何处理
IE 和部分 Android 4.x WebView 不支持 document.fonts。检测后应降级为超时+轮询，避免无限等待：
<pre class="brush:php;toolbar:false;">function waitForFont(fontDesc, timeout = 3000) {
if ('fonts' in document) {
return document.fonts.ready;
}
return new Promise((resolve) => {
const start = Date.now();
const check = () => {
if (document.fonts.check(fontDesc)) {
resolve();
} else if (Date.now() - start > timeout) {
resolve(); // 超时也继续，避免卡死
} else {
setTimeout(check, 100);
}
};
check();
});
}
<p>// 使用
waitForFont('24px "Noto Sans SC"').then(() => {
ctx.font = '24px "Noto Sans SC"';
ctx.fillText('你好', 50, 50);
});</p>
真正容易被忽略的是：字体加载状态和 Canvas 渲染上下文生命周期无关。如果用户切换标签页再切回，或设备休眠唤醒，字体缓存可能失效，但 Canvas 不会自动重绘——这类场景需要监听 visibilitychange 并重新触发就绪检查。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
