Google шрифты не будут отображаться на холсте первый раз

Question

Я боролся с этим несколько дней безрезультатно, но кажется, что это должно быть просто.

Я не могу правильно отображать шрифты Google при первом рисовании холста. Последующее отображение шрифтов в порядке. Это, безусловно, связано с сроками загрузки шрифта.

Я пробовал большинство предлагаемых исправлений, перечисленных на Drawing text to <canvas> with @font-face does not work at the first time, но не увенчались успехом.

Вот мой jsfiddle включающего большинство исправлений по ссылке выше: http://jsfiddle.net/HatHead/GcxQ9/23/

При загрузке jsfiddle, вы увидите название холста и текст по умолчанию шрифтов. Когда вы нажимаете кнопку «Выполнить», шрифты будут обновляться до шрифтов, как указано в коде js.

Вот код из приведенного выше jsfiddle:

HTML:

<!-- you need to empty your browser cache and do a hard reload EVERYTIME to test this otherwise it will appear to working when, in fact, it isn't --> 

<h1>Title Font</h1> 

<p>Paragraph font...</p> 
<canvas id="myCanvas" width="740" height="400"></canvas> 

CSS:

@import url(http://fonts.googleapis.com/css?family=Architects+Daughter); 
@import url(http://fonts.googleapis.com/css?family=Rock+Salt); 
canvas { 
    font-family:'Rock Salt', 'Architects Daughter' 
} 
.wf-loading p { 
    font-family: serif 
} 
.wf-inactive p { 
    font-family: serif 
} 
.wf-active p { 
    font-family:'Architects Daughter', serif; 
    font-size: 24px; 
    font-weight: bold; 
} 
.wf-loading h1 { 
    font-family: serif; 
    font-weight: 400; 
    font-size: 42px 
} 
.wf-inactive h1 { 
    font-family: serif; 
    font-weight: 400; 
    font-size: 42px 
} 
.wf-active h1 { 
    font-family:'Rock Salt', serif; 
    font-weight: 400; 
    font-size: 42px; 
} 

JS:

// do the Google Font Loader stuff.... 
WebFontConfig = { 
    google: { 
     families: ['Architects Daughter', 'Rock Salt'] 
    } 
}; 
(function() { 
    var wf = document.createElement('script'); 
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + 
     '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; 
    wf.type = 'text/javascript'; 
    wf.async = 'true'; 
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(wf, s); 
})(); 

//play with the milliseconds delay to find the threshold - don't forget to empty your browser cache and do a hard reload! 
setTimeout(WriteCanvasText, 0); 

function WriteCanvasText() { 
    // write some text to the canvas 
    var canvas = document.getElementById("myCanvas"); 
    var context = canvas.getContext("2d"); 
    context.font = "normal" + " " + "normal" + " " + "bold" + " " + "42px" + " " + "Rock Salt"; 
    context.fillStyle = "#d50"; 
    context.fillText("Canvas Title", 5, 100); 
    context.font = "normal" + " " + "normal" + " " + "bold" + " " + "24px" + " " + "Architects Daughter"; 
    context.fillText("Here is some text on the canvas...", 5, 180); 
} 

Он работает с использованием задержки, но это плохое решение.

Любые идеи для решения этой проблемы? Кто-нибудь избил его раньше? Я не хотел бы сдаваться и помещать изображение вместо текста для первой загрузки.

Большое спасибо stackoverflow'ers!

Answer 1

Я сдался и, для самого первого загружаемого файла, я использовал изображение текста с шрифтами шрифта вместо фактического текста, позиционируя фактический текст шрифтами-шрифтами за пределами область отображения холста.

Все последующее использование шрифтов на холсте отображается правильно.

Мой код обхода обходятся на моем веб-сайте, однако я рад создать jsfiddle рабочей модели, если кому-то понадобится.

Answer 2

Если вы перешли к своему JS Fiddle и дождитесь его onDomready, а не onLoad, холст, похоже, будет исправлен в первый раз.