仅在加载 Google Web 字体后绘制到 canvas
Draw to canvas only after Google Web Font is loaded
我在 canvas 上使用 .fillText()
,我希望其文本使用 Google 网络字体(在我的例子中是 Oswald)。
当页面加载时,文本在字体加载之前绘制到 canvas,但显然一旦字体加载 canvas 上的文本不会更新,因为它已经被绘制为位图。
如何将此文本绘制延迟到加载 Web 字体之后? canvas 上也绘制了一个矩形,我仍然想立即在 $(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>
我在 canvas 上使用 .fillText()
,我希望其文本使用 Google 网络字体(在我的例子中是 Oswald)。
当页面加载时,文本在字体加载之前绘制到 canvas,但显然一旦字体加载 canvas 上的文本不会更新,因为它已经被绘制为位图。
如何将此文本绘制延迟到加载 Web 字体之后? canvas 上也绘制了一个矩形,我仍然想立即在 $(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>