Question

这是我的代码：

img.onload = function() {

  ctx.drawImage(img, 0, 0, 600, 480);

  ctx.lineWidth  = 4;
  ctx.font = "3em 'Lato'";
  ctx.strokeStyle = 'black';
  ctx.fillStyle = 'white';

  var text = 'Custom Text';
  text = text.toUpperCase();
  x = canvas.width/2;
  y = canvas.height - canvas.height/4.5;
  ctx.strokeText(text, x, y);
  ctx.fillText(text, x, y);
}

画布上的字体不是Lato。在阅读其他答案后，我认为可能是因为我没有在任何其他HTML元素上使用它，但后来我还添加了一个使用Lato字体的标题。还有什么可以导致这个问题吗？

Answer 1

在开始使用画布之前尝试使用此代码：

var f = new FontFace("Lato", /* url */);
  f.load().then(function() {
    // Ready to use the font in a canvas context
});

来自：https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/font

Answer 2

我认为你可能只有一个格式错误的font字符串。尝试删除font-family周围的引号：

ctx.font = "3em Lato";

Answer 3

这是一个 working example based on the MDN example。 MDN 示例中缺少的是 document.fonts.add:

const image = document.getElementById("canvas");

let myFont = new FontFace(
  "Pangolin",
  "url(https://fonts.gstatic.com/s/pangolin/v6/cY9GfjGcW0FPpi-tWMfN79z4i6BH.woff2)"
);

myFont.load().then((font) => {
  document.fonts.add(font);
  console.log("Font loaded");
  var ctx = image.getContext("2d");
  ctx.fillStyle = "#292929";
  ctx.font = "30px Pangolin";
  ctx.fillText("A chicken", 400, 120);
});

Answer 4

试试这个

ctx.font = "3em Lato";

无法在Canvas上使用Google字体

4 个答案: