在谷歌网络字体加载完成后再绘制到画布上。

Question

在谷歌网络字体加载完成后再绘制到画布上。

javascriptcanvasgoogle-webfonts

6

我正在canvas上使用.fillText()，我希望文本使用Google Web Font（在我的情况下是Oswald）。

当页面加载时，字体尚未加载完成就将文本绘制到canvas上，但是一旦字体加载完成，canvas上的文本不会更新，因为它已经被绘制成位图了。

如何延迟文本绘制直到Web Font加载完成？一个矩形也绘制到canvas上，我仍然希望在$(document).ready()立即绘制它。

我想说的是，我希望延迟.fillText()而不是覆盖默认字体，因为这是一个设计导向的应用程序，FOUT对美学产生负面影响。

- hotstuff69

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- markE · Accepted Answer

以下是使用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>