HTML5画布中的fillText字体不会默认更改

Question

我想做的事情似乎相当简单，但我无法让它正常工作。我试图更改HTML5画布中绘制的元素的字体类型。我有这个：

function drawStaticElements(){
    /*Few other non text elements here*/

    gameScreenCtx.font = "18px Buxton Sketch";
    //gameScreenCtx.font = '18px Comic Sans MS';
    gameScreenCtx.fillStyle = "white";
    gameScreenCtx.fillText(gameScreenCtx.font, 5, 20);

    gameScreenCtx.font = "18px Buxton Sketch";
    gameScreenCtx.fillStyle = "white";
    gameScreenCtx.fillText("Number of victories: "+numberOfVictories, 5, 40);

我不知道这可能是浏览器版本的东西还是别的东西，但是在我用来开发它的PC中，代码工作正常，即使上传到网络服务器也是如此。如果我尝试从另一台PC访问它，它总是默认为相同的字体，我尝试了一些更常见的字体，甚至Comic Sans也没有。文本正确显示了字体名称，但它不会以该字体呈现。

作为正在发生的事情的示例，我上传到Bitballoon网络服务器并从2台不同的计算机访问它，开发计算机的结果如下：

来自不同计算机的结果是：

我在这里做错了吗？

Answer 1

嗯，在正常情况下，计算机只能渲染系统上安装的字体，即便如此，我想也可能会出现其确切名称等问题。对于＆＃34;常见字体＆＃34;，这些在操作系统之间有所不同 - 例如，我的Linux计算机没有Comic Sans MS。

访问您网站的每个用户（甚至很大一部分用户）似乎都不太可能安装您的特定字体。

在所有用户设备上实现一致外观的常见解决方案是使用CSS3 Web Fonts告诉浏览器在加载页面之前下载实际字体的位置。