HTML5 Canvas，导入本地字体？

Question

我正在尝试导入要在 html5 画布中使用的字体。我的电脑上有文件，但到目前为止我尝试的一切都没有奏效。画布仅显示默认字体。我一定是做错了什么或错过了一步。

我已经用这样的 CSS 加载了它们：

@font-face {
font-family: 'RifficFree-Bold';
src: local('RifficFree-Bold'), url(./fonts/RifficFree-Bold.ttf), format('truetype');
}

然后像这样在 JS 中调用它们：

    function drawText(myText, ctx) {
        ctx.font = "40px RifficFree-Bold";
        ctx.fillStyle = "rgb(0, 0, 0, " + myText.fill + ")";
        ctx.fillText(myText.text, myText.x, myText.y);
    }

我知道程序已经走到这一步了，因为每当我将 40px 更改为另一个值时，字体的大小都会发生应有的变化。我想我一定是错误地加载了实际的字体文件。有什么想法吗？

Answer 1

自定义字体在使用之前不会加载（您可以阅读question about this here）。因此，当调用您的 drawText 函数时，字体不会开始加载，直到调用 ctx.fillText - 此时文本已经使用默认字体绘制。

您可以通过两种方式强制浏览器预加载字体；

1. 在页面某处放置一个不可见的小 div，其中包含一些使用您的字体的文本（加载字体后可以将其删除）。

2. 如果你需要加载几种字体或者不想修改你的 HTML，你可以创建一个加载字体的小函数：

   function _loadFont(fontname){
       var canvas = document.createElement("canvas");
       //Setting the height and width is not really required
       canvas.width = 16;
       canvas.height = 16;
       var ctx = canvas.getContext("2d");
   
       //There is no need to attach the canvas anywhere,
       //calling fillText is enough to make the browser load the active font
   
       //If you have more than one custom font, you can just draw all of them here
       ctx.font = "4px "+fontname;
       ctx.fillText("text", 0, 8);
   }
   

   在你需要使用字体之前调用函数，当你真正需要它们时应该加载它们。

Answer 2

您的示例中的实际问题似乎是 url 和格式参数之间的逗号 (,)。 format 应该直接跟在网址后面：

src: local('RifficFree-Bold'), url(./fonts/RifficFree-Bold.ttf) format('truetype');