Javascript 仅在加载Google Web字体后绘制到画布

我正在画布上使用

.fillText（）

，我希望画布上的文本采用谷歌网页字体（在我的例子中是Oswald）

加载页面时，文本在加载字体之前绘制到画布上，但很明显，一旦字体加载，画布上的文本不会更新，因为它已经绘制为位图

如何将此文本绘制延迟到Web字体加载之后？在画布上还绘制了一个矩形，我仍然希望立即在

$（document.ready（）

上绘制该矩形

---

我应该说，我想延迟

.fillText（）

而不是覆盖默认字体，因为这是一个面向设计的应用程序，FOUT会对美观产生负面影响。

下面是一个如何使用TypeKit的WebFontLoader在使用字体之前允许加载字体的示例：

//加载google字体==单调
WebFontConfig={
谷歌：{families:['Monoton']}，
活动：函数（）{start（）；}，
};
（功能（）{
var wf=document.createElement（“脚本”）；
wf.src=https://ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js';
wf.async='true'；
文件。头。子文件（wf）；
})();
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
函数start（）{
ctx.font='50px单调'；
ctx.textb基线='top'；
ctx.fillText（'编号'、20、10）；
}

body{背景色：象牙色；填充：10px；}
#画布{边框：1px纯红；}

---

谢谢。我想我的问题是我的WebFontLoader与我的主JavaScript文件是分开的，你的例子告诉我我做错了什么：）这个问题被问了很多，到目前为止，这是我找到的有效解决方案，+1表示：）