仅在加载Google Web Font后绘制到画布

Question

我.fillText()在画布上使用,我希望将其放在Google Web字体中(​​Oswald,在我的例子中).

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

如何在加载Web字体之前延迟此文本绘图？还会在画布上绘制一个矩形,我仍然希望立即绘制$(document).ready().

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

Answer 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;}

<canvas id="canvas" width=300 height=300></canvas>