0

我目前正在处理一个 HTML5 游戏项目，由于 Arial 的界面看起来不够精美，我一直在尝试让两个 Google Webfonts 工作，以增强我的游戏设计。

我试图在我的游戏画布的 context.fillText 调用中使用这些，但我遇到了一个奇怪的问题，我找不到任何解释。

实际上字体似乎是随机的，或者没有正确下载（或初始化？我不能确定）。这与缓存无关，我找不到行为“规则”来通过故障排除来识别这一点。有时字体第一次加载得很好，第二次加载，然后我永远无法再次显示它们，直到我清空缓存一次或两次。但这自然只是一个例子。

我在我的 html 中的画布底部放置了一小段文本（浏览器兼容性等等等等），我已将其设置为两种 webfonts 之一，它总是呈现得很好，所以我可以确认这个错误完全是关于画布的。

目前，我的代码中有关于字体处理的这些步骤：

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 元素（正如我在另一篇 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)
        }

我正在 Google Chrome 上测试我的游戏，并且正在使用 Google Webfonts Loader 代码段。当我在开始游戏时检查 CSS 时，一切运行顺利，我的加载屏幕（我用标准的网络字体编写，让用户知道他必须稍等片刻）正在等待加载字体和资产（我可以在我的 CSS 中看到匹配的类）并且标题屏幕在加载之前不会开始动画。

尽管如此，有时字体会显示，有时它们不会显示，我什至看不到我也在标题屏幕上显示的框架。我不明白为什么。我只有背景图，控制台中没有错误。

我的问题的另一个奇怪的部分是，每当我的标题屏幕保持空白并且我打开了一个开发工具（例如我用 F12 打开的 Chrome 工具）时，每当我关闭它时，字体和绘图就会打开我的标题屏幕神奇地出现了。我真的不知道为什么。

任何帮助将不胜感激，如果需要更多信息，请询问我！

4

1 回答 1

1

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

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

这是我现在拥有的一些 CSS，用于使用适当的 z-indexes 设置两个相互重叠的画布“层”：

    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-11T13:01:53.687 回答