HTML5 캔버스 CSS3의 @ font-face를 사용하여 텍스트를 표시하지 않습니다

내 HTML 문서는 다음과 같습니다HTML5 캔버스 CSS3의 @ font-face를 사용하여 텍스트를 표시하지 않습니다

는

<!DOCTYPE html> 
<HTML> 
    <HEAD> 
     <meta charset="utf-8"> 
    <style> 
     @font-face { 
     font-family: "canvas"; 
     font-style: normal; 
     font-weight: normal; 
     src: local('JesterRegular.woff'), url('JesterRegular.woff') format('woff'); 
     } 
    </style> 
     <title>Interactive</title> 
    </HEAD> 
    <BODY> 
     <div style="font-family: canvas">test</div> 
    <canvas id="simulator"> 
     <h1>Your browser doesn't support this element.</h1> 
    </canvas> 
    <script type="text/javascript" src="elements.js"></script> 
    <script type="text/javascript" src="backgroundgen.js"></script> 
     <script type="text/javascript" src="tileengine.js"></script> 
     <script type="text/javascript" src="simulator.js"></script> 
    </BODY> 
</HTML>

backgroundgen.js에서 내 자바 스크립트의 적용 부분은 다음과 같습니다

drawTitle: function() { 
    BackgroundGen.context.fillStyle = BackgroundGen.titleBGColor; 
    BackgroundGen.context.fillRect(0,0,BackgroundGen.canvas.width,30); 
    textXpos = BackgroundGen.canvas.width/2; 
    BackgroundGen.context.textAlign = "center"; 
    BackgroundGen.context.font = '20px "canvas"'; 
    BackgroundGen.context.fillStyle = "rgb(0,0,0)"; 
    BackgroundGen.context.fillText(BackgroundGen.titleText, textXpos, 15); 
}

하는 사용자 정의를 사용하는 경우 "캔버스"글꼴, 텍스트가 전혀 표시되지 않습니다. 예를 들어 arial과 같이 일반적인 글꼴로 캔버스를 대체하면 잘 표시됩니다. 필자는 HTML에서 <div> 태그를 사용하여 캔버스에 글꼴을 표시하기 전에 글꼴을로드하는 기술을 적용했지만 여전히 기쁨은 없습니다. <div> 태그의 내용은 적절한 캔버스 글꼴을 표시하며 캔버스에는 아무 것도 표시되지 않습니다. 기록을 위해 우분투에서 Chromium v12와 Firefox v6를 실행하고 있습니다.

분명히하기 위해 Chromium의 자바 스크립트 콘솔은 오류를보고하지 않으며 Firefox의 오류 콘솔에서도 아무 것도보고하지 않습니다.

출처

2011-09-10 Scott

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

It looks like embedded fonts should work in <canvas> 그러나 글꼴을 으로 완전히 채우려면 그림을 그리기 전에을로드해야합니다. 즉, <div>을 사용하여 브라우저가 글꼴을로드하도록 강제 한 다음 다운로드 한 후까지 그리기를 기다리는 것을 의미합니다.

document.load 또는 setTimeout(drawTitle, 1000) 이후에 drawTitle을 호출 해 보셨습니까?

출처

2011-09-10 17:14:23 josh3736

예 번호 :

<html> 
    <head> 
    <style type="text/css"> 
     @font-face { 
     font-family: YourFontName; 
     src: url(your/very/long/URL/here) 
    </style> 
    <script> 
     function onloaded() { 
     //your code canvas code goes here 
     } 
    </script> 
    </head 
    <body onload="onloaded()"> 

    <canvas id="somecanvasid"></canvas> 

    </body> 
</html>

함수 onloaded 콜백 역할을하고, HTML 문서의 모든 내용이로드 될 때 실행된다. 다른 모든 것이로드를 완료하면 포함되도록 HTML 문서에 정의해야합니다.

body:before{ 
    font-family: Allura; 
    height: '0px'; 
    overflow: hidden; 
    position: absolute; 
    content: "abcděůž"; 
}

WOFF 파일이 일부 특수 문자를 분할 할 수 있으므로 내용을 포함해야한다 :

출처

2012-09-25 16:54:45 Maxim

는이 같은 CSS로 다운로드 *의 .woff 파일 메시지를 표시 할 수 있습니다.

그러나 Woff 파일 다운로드는 여전히 비동기이므로 페이지로드 후 fillText()가 즉시 호출되면 작동하지 않을 수 있습니다.

출처

2016-09-30 09:00:18 KubaKubikula

HTML5 캔버스 CSS3의 @ font-face를 사용하여 텍스트를 표시하지 않습니다

답변

관련 문제