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 宣言のフォント データをダウンロードする時間がなかったため、最初はフォントが表示されなかったと思います。フォント データがない場合、ブラウザはデフォルトで通常のフォントになります。

ブラウザが Google からフォント データを取得するまで JavaScript コードを実行しないようにすることで、おそらくこれを解決できます。たとえば、次のようになります。

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