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

Draw to canvas only after Google Web Font is loaded

本文关键字：绘制 字体 加载 Google Web      更新时间：2023-09-26

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

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

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

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

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

相关文章：