2010-08-03 5 views
4

나는 HTML5 캔버스가 있고 @ font-face-font를 사용하여 context.fillText(...); 인 텍스트를 씁니다.
Firefox (3.6)로 페이지 표시하기 캔버스의 첫 번째 페인트에서 글꼴이 아직 다운로드되지 않았으므로 텍스트가 표준 글꼴로 표시됩니다.
글꼴이 캔버스에서만 사용되고 캔버스가 jQuery를 사용하여 아약스와 함께로드되고 표시되기 때문에 '해결책'이 발견되었습니다. 작동하지 않습니다.
타임 아웃 setTimeout(repaintCanvas, 500);을 사용하는 것보다 더 좋은 해결책이 있습니까?@ font-face-font가로드 될 때까지 첫 캔버스를 다시 칠할 때까지 기다리는 방법은 무엇입니까?

+0

참조 http://stackoverflow.com/questions/2756575/drawing-text-to-canvas-with-font-face-does-not-work-at-the-first-time/8223555#8223555 –

답변

4

을이 시도 할 수 있었다 나는 Reigel의 대답의 도움으로 솔루션을 찾은 것 같아요 :

$.get('font/url.ttf', function() { 
    // do canvas codes.... cause font is loaded... 
}); 

는 또한 캔버스에 대한 font-family: 'fontfacename';를 통해 글꼴을 사용 '을 학부모 요소.
글꼴이 두 번로드되었거나 알 수 없습니다. 하지만 두 번째로드가 없으면 오른쪽으로 표시되지 않습니다.

4

아니라, 당신은

$.get('font/url.ttf',function(){ 
    // do canvas codes.... cause font is loaded... 
}); 
+0

Thanx, 그러나 작동하지 않을 것이다. 글꼴 파일이로드되지만 브라우저가 @ font-face의 파일이기도하다는 것을 인식하지 못한다고 생각합니다. – alopix

관련 문제