canvas - 画布字体第一次开机不起作用？

Question

这是我的演示jsFiddle

HTML

<canvas id="random"></canvas>

jQuery

function Random() {
    var length = 9,
        charset = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789",
        retVal = "";
    for (var i = 0, n = charset.length; i < length; ++i) {
        retVal += charset.charAt(Math.floor(Math.random() * n));
    }
    return retVal;
}
var ctx = document.getElementById("random").getContext('2d');
ctx.font = "30px Codystar";
ctx.fillText(Random(), 30, 30);

我的问题：字体第一次启动不起作用？

Answer 1

我认为您的字体最初没有显示，因为在 JavaScript 代码运行之前浏览器没有时间下载您的 @font-face 声明的字体数据。如果没有字体数据，浏览器将默认为其正常字体。

您可以通过阻止 JavaScript 代码运行直到浏览器从 Google 获取字体数据来解决此问题，例如：

window.onload = function(){
    //your code here
};