仅在加载 Google Web 字体后才绘制到画布答案

【问题标题】：Draw to canvas only after Google Web Font is loaded仅在加载 Google Web 字体后才绘制到画布
【发布时间】：2015-06-01 16:08:42
【问题描述】：

我在画布上使用.fillText()，我希望其文本使用 Google Web 字体（在我的例子中是 Oswald）。

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

我怎样才能将这个文本绘制延迟到 Web 字体加载之后？画布上还绘制了一个矩形，我仍想立即在 $(document).ready() 上绘制它。

我应该说我想延迟.fillText()而不是覆盖默认字体，因为它是一个面向设计的应用程序，并且FOUT对美学有负面影响。

【问题讨论】：

标签： javascript canvas google-webfonts

【解决方案1】：

下面是一个示例，说明如何使用 TypeKit 的 WebFontLoader 让字体在使用前有时间加载：

// load google font == Monoton
WebFontConfig = {
  google:{ families: ['Monoton'] },
  active: function(){start();},
};
(function(){
  var wf = document.createElement("script");
  wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js';
  wf.async = 'true';
  document.head.appendChild(wf);
})();


var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;


function start(){
  ctx.font = '50px Monoton';
  ctx.textBaseline = 'top';
  ctx.fillText('No', 20, 10);
}

body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}

&lt;canvas id="canvas" width=300 height=300&gt;&lt;/canvas&gt;

【讨论】：

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