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

自定义字体字体在使用之前不会加载（您可以在此处阅读有关此问题 ）。 因此，在调用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参数之间的逗号（，）。 format应直接跟随网址：

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