使用font-face字体填充canvas的fillText

Question

编辑：好吧，看起来字体只有在DOM中的元素使用时才会加载，所以我只是使用了一个隐藏的带有使用font-face字体的文本的Div，现在它正在工作...

我正在使用这段代码更新favicon的更新数量，但我想用自定义像素字体来写数字。

这是我的Javascript代码：

            var canvas = document.createElement('canvas'),
            ctx,
            img = document.createElement('img'),
            link = document.getElementById('favicon').cloneNode(true),
            updates = data;

        if (canvas.getContext) {
          canvas.height = canvas.width = 16; // set the size
          ctx = canvas.getContext('2d');
          img.onload = function () { // once the image has loaded
            ctx.drawImage(this, 0, 0);
            ctx.font = 'normal 12px Visitor';
            ctx.fillStyle = '#213B55';
            ctx.textBaseline="middle";
            ctx.textAlign="center";
            ctx.fillText(updates, 10, 10);
            link.href = canvas.toDataURL('image/png');
            document.body.appendChild(link);
          };
          img.src = 'favicon_new.png';
        }

这是我的CSS中的内容

@font-face {
font-family: 'Visitor';
font -style: normal;
font-weight: normal;
src: url('fonts/visitor.woff') format('woff');

如果我改变这一行：

  ctx.font = 'normal 12px Visitor';

'normal 12px Arial' 可以正常工作。如果我使用自定义的 "Visitor" 字体，它只会更改网站图标，但是我看不到数字。

你有什么想法，可能出了什么问题吗？

- Santiago

---

看看我使用<img>元素加载字体的解决方案：https://dev59.com/p13Va4cB1Zd3GeqPAW1k#8222880 - a paid nerd

你也可以在CSS中使用数据URL加载字体，这对我很有效。 - Blaise

不要害怕将您的“编辑”发布为答案。 - xdhmoore

是的，请将您的修改作为答案发布并接受，这样它就不会再出现在未回答的队列中，而且对于遇到此问题的人来说更容易找到答案。 - Simon Sarris

注意，隐藏div技巧似乎并不总是有效的。很抱歉我现在无法确定在哪种配置下会失败，但我已经看到过它失败的情况。如果它适用于您的目标浏览器，则这不是一个问题。 - GameAlchemist

Answer 1

Arial是一种“网络安全字体”，这意味着无论您使用什么计算机或移动设备，它都会显示出来（也称为“回退”）。

以下是一些来自Google Fonts的Pacifico示例代码（它不是一种网络安全字体）。

<link href="http://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css">
<script>
 window.onload=function() {
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
  context.fillStyle = "blue";
  context.font = "16pt Pacifico";
  context.fillText("Cursive font", 50, 50);
 }
</script>
<canvas id="canvas" width="200" height="200"></canvas>

其他字体也应该可以实现。

确保你的@font-face具有font-style: normal;和font-weight: 400;。

- theawesomecoder61