谷歌网络字体在HTML5游戏随机装入帆布

我有一个HTML5游戏项目中，我目前的工作，并因为宋体似乎看中了足够的接口不，我一直在努力得到两个谷歌网络字体的工作，在为了增强我的游戏设计。谷歌网络字体在HTML5游戏随机装入帆布

我试图使用这些在context.fillText从我的游戏画布电话，但我面临着一个奇怪的问题了，我找不到任何解释。

其实字体似乎是随机，或无法下载（或初始化？我不能肯定）正确。这不是关于缓存，我无法找到一个“规则”的行为，通过故障排除来识别此问题。有时字体在第一次和第二次加载时都很好，然后我再也不能让它们再次显示，直到我清空一次或两次缓存。但是，这自然就是一个例子。

我有一小段文字放在我的画布底部（浏览器兼容性等等等等等等）在我的HTML，我已经设置为两个网页字体之一，它总是渲染就好所以我可以确认这个bug完全是关于画布。

目前，我在我的关于字体的处理代码的那些步骤：

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 elem恩（因为我读它可以帮助事情工作，在另一个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) 
     }

我测试谷歌浏览器我的比赛，我使用谷歌网络字体装载机片段。当我在开始游戏时检查CSS时，一切运行平稳，我的加载屏幕（我用标准Web字体编写，让用户知道他必须等待一会儿）正在等待字体和要加载的资源（我可以在我的CSS中看到匹配的类），并且标题屏幕在加载之前不会开始动画。

不过，有时字体显示的获得，有时他们不这样做，我甚至不能看到帧我还显示标题画面上。我不明白为什么。我只有我的背景图，并且在控制台中没有错误。

我的问题的另一个奇怪的部分是，每当我得到的情况下，我的标题屏幕保持空白，并且我有一个开放的开发工具（例如我用F12打开的Chrome），每当我关闭它，字体我的标题屏幕上的图画奇迹般的出现。我真的不知道为什么。

任何帮助将不胜感激，如果需要进一步的信息，请咨询我！

来源

2012-12-11 Cécile Fecherolle

好吧，没关系。我发现真正的问题是我没有明确地设置我的两个画布（两层）的z-index。它看起来像z-index，如果没有在CSS中设置，则由Chrome根据哪个元素首先出现而设置，与Firefox或IE不同。这两个按照html代码的顺序创建元素，这就是为什么我没有遇到任何与IE9或FF类似的问题。

所以，这是我的问题中的“随机”来自...现在一切都很好。

这里是CSS的位我现在有，用于调节两个帆布“层”彼此重叠适当的z索引：

canvas { 
     width: 320px; // those are my canvas' dimensions, put your own! 
     height: 500px; 
     position: absolute; 
     font-style: "Londrina Solid", "Luckiest Guy"; 
     left: 50%; 
     margin-left: -160px; // this is my trick for centering layers in the page 
     top: 0; 
     outline: 0; 
     border: 1px solid #000; 
     display:block; 
    } 

    #c { 
     z-index:0; 
    } 

    #c2 { 
     z-index:1; 
    }

来源

2012-12-11 13:01:53

谷歌网络字体在HTML5游戏随机装入帆布

回答

相关问题