javascript - HTML5 Canvas 中的 fillText 字体不会更改默认值

Question

我想做的事情看起来很简单，但我就是无法让它正常工作。我正在尝试更改在 HTML5 Canvas 中绘制的元素的字体类型。我所拥有的是:

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

好吧，在正常情况下，计算机只能呈现系统上安装的字体，即便如此，我想它们的确切名称等也可能存在问题。至于“通用字体”，它们因操作系统而异——例如，我的 Linux 计算机没有 Comic Sans MS。

访问您网站的每个用户(甚至大部分用户)似乎都不会安装您的特定字体。

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