현재 작업하고있는 HTML5 게임 프로젝트가 있으며, Arial이 인터페이스에 대해 충분히 좋아 보이지 않아서 두 개의 Google 웹 글꼴이 작동하도록 노력하고 있습니다. 내 게임 디자인을 향상시키기 위해서.HTML5 게임 캔버스에서 무작위로로드되는 Google 웹 글꼴
내 게임 캔버스에서 context.fillText를 사용하려고하는데 이상한 문제가있어 설명을 찾을 수 없습니다.
실제로 글꼴이 무작위로 다운로드되거나 (초기화되지 않습니까? 확실하지 않습니다) 제대로 표시되지 않는 것 같습니다. 이것은 캐시에 관한 것이 아니므로 문제를 해결하여이를 식별하는 동작의 "규칙"을 찾을 수 없습니다. 처음에는 글꼴이 제대로로드되고 두 번째로 글꼴이로드 된 다음 캐시를 한두 번 비울 때까지 글꼴을 다시 표시하지 못하는 경우가 있습니다. 그러나 이것은 당연히 예일뿐입니다.
나는 두 개의 웹 글꼴 중 하나에 설정 한 내 html의 캔버스 (브라우저 comaptibility blah blah blah)의 맨 아래에 놓은 작은 텍스트 조각이 있으며 항상 잘 렌더링됩니다 그래서이 버그가 전적으로 캔버스에 관한 것인지 확인할 수 있습니다. 순간
, 내가 처리 글꼴에 대한 내 코드에서이 단계를 가지고 :
HTML :
<link href='http://fonts.googleapis.com/css?family=Londrina+Solid|Luckiest+Guy' rel='stylesheet' type='text/css'>
<link rel=StyleSheet href="style.css" type="text/css">
CSS (내있는 style.css 파일의 일부) :
canvas {
...
font-style: "Londrina Solid", "Luckiest Guy";
...
}
내가 볼 수 있듯이 하나 또는 다른 글꼴이 캔버스에 적용되는지, DOM 요소인지 ent (다른 stackoverflow 게시물에서 작업하는 것이 도움이 될 수 있음을 읽었을 때)하지만 그 사실은 바뀌지 않았습니다.
JS는 :
var fontsReady = false;
var starting = false;
// check if the game isn't already starting this variable is about timeOut)
WebFontConfig = {
google: {
families : ['Luckiest Guy', 'Londrina Solid']
},
active: function() {
console.log('All fonts are now loaded');
fontsReady = true;
}
}
var webFontsInit = 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);
}();
function checkReady() {
if (document.readyState === "complete" && fontsReady == true && starting == false) {
console.log('States are OK');
starting = true;
ctx.save();
titleScreen();
}
}
else
setTimeout(checkReady, 500); // i think this timeout is needed, to regularly check for the game loading states (such as fontsReady)
}
나는 구글 크롬에 내 게임을 테스트하고있어, 나는 구글 웹 글꼴 로더 스 니펫 (snippet)을 사용하고 있습니다. 게임을 시작하는 동안 CSS를 확인하면 모든 것이 원활하게 실행됩니다. 로딩 화면 (사용자가 잠시 기다려야한다고 알리는 표준 웹 글꼴로 작성)은 글꼴 및 애셋로드를 기다리고 있습니다. (내 CSS에서 일치하는 클래스를 볼 수 있음)로드 될 때까지 제목 화면이 애니메이션으로 시작되지 않습니다.
가끔 글꼴이 표시되거나 때로는 글꼴이 표시되지 않고 제목 화면에도 표시되는 프레임을 볼 수없는 경우가 있습니다. 이유를 이해할 수 없습니다. 난 그냥 내 배경 그리기, 그리고 콘솔에 오류가 있습니다.
또 다른 이상한 부분은 내 제목 화면이 비어있는 상태가 될 때마다 개발자 도구가 열려있는 경우 (예 : Chrome에서 F12로 열어 본 것과 같은 경우), 글꼴을 닫을 때마다 내 타이틀 화면의 그림이 마술처럼 나타납니다. 나는 정말로 이유를 모른다.
추가 정보가 필요하면 도움을 주시면 대단히 감사하겠습니다. 저에게 물어보십시오!