Google 글꼴이 캔버스에 처음으로 표시되지 않습니다

Question

저는 며칠 동안 아무런 소용이 없었지만 단순한 것이어야합니다.

처음으로 캔버스를 그릴 때 Google 글꼴을 올바르게 표시 할 수 없습니다. 글꼴의 후속 디스플레이는 OK입니다. 확실히 글꼴을로드하는 타이밍과 관련이있는 것 같습니다.

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을 사용하여 onLoad 대신 onDomready를 기다리는 경우 캔버스가 처음부터 올바르게 표시됩니다.