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);

我不知道这是否可能是浏览器版本或其他问题，但在我用来开发它的电脑上，代码运行正常，即使上传到 Web 服务器也是如此。如果我尝试从另一台电脑访问它，它总是默认为相同的字体，我尝试了一些更常见的字体，甚至 Comic Sans 也不起作用。文本正确显示字体名称，但不会以该字体呈现。

作为发生情况的示例，我将其上传到 Bitballoon Web 服务器并从两台不同的计算机访问，开发计算机的结果如下：

另一台电脑的结果是这样的：

我在这里做错了什么吗？

- BluZombie

Answer 1

通常情况下，计算机只能呈现安装在系统上的字体，即使如此，它们的确切名称等方面也可能存在问题。至于“常见字体”，这些在操作系统之间是不同的——例如，我的Linux计算机没有Comic Sans MS。

显然，每个用户（甚至大部分用户）访问您的网站时都安装了您特定的字体似乎是不太可能的。

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

- zinfandel