Question

编辑：好吧，看起来字体是在DOM上的元素使用后加载的，所以我只使用隐藏的Div和文本使用font-face字体并且它正在工作现在... :)）

我正在使用此代码通过大量更新来更新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';

'正常12px Arial'正常工作。如果我使用自定义“访客”字体，它只是更改图标，但我看不到该数字。

关于可能出现什么问题的任何想法？

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

将font-face字体与canvas fillText一起使用

1 个答案: