当我用fillText() 写东西时，为什么我的自定义字体不会显示? [英] How come my custom font wont show when I write stuff with fillText()?

问题描述

(注意:我还是个初学者)我有一个自定义字体，几乎适用于我页面上的所有文本，但我有一个我想要文本的画布元素，所以我尝试应用大小和字体使用
ctx.font = '20px myCustomFont';ctx.fillText('Hello World', 150, 250);

(Note: I'm still kind of a beginner) I have a custom font that works fine for nearly all text on my page, but I have a canvas element that I want text on so I try to apply the size and font by using
ctx.font = '20px myCustomFont'; ctx.fillText('Hello World', 150, 250);

它会调整为 20px，但它只显示默认字体.我不知道该怎么做，这是相关的代码:

it will resize to 20px but it only displays the default font. I am not sure what to do, here's the relevant code:

我的 CSS:

* {
  font-family: 'myCustomFont';
}
@font-face {
  font-family: 'myCustomFont';
  src: url('myCustomFont.ttf');

我的 HTML:

<p>This uses the custom font perfectly fine</p>
<canvas id='canvas' width='800' height='400'></canvas>

我的 JavaScript:

My JavaScript:

let ctx = document.getElementById('canvas').getContext('2d');
ctx.font = "20px myCustomFont";
ctx.fillText('Hello World', 150, 250); //Hello World will be at 20px, but it wont use the custom font

推荐答案

我遇到过这个问题，原因是在编写画布时字体没有加载.

I've experienced this problem and it was down to the fact that at the time of writing the canvas the font wasn't loaded.

它也不会被加载以在您的示例中显示段落，但是一旦字体完全加载，系统将返回并重新显示，并且在现代系统上往往如此之快以至于您不会甚至注意到一闪而过的重新粉刷.然而到那时它并不知道你在画布上画的是文本，画布就它而言只是一堆像素".

It wouldn't have been loaded to display the paragraph in your example either, but the system will go back and redisplay that once the font is fully loaded, and on modern systems that tends to be so quick that you don't even notice a flash of repainting. However by then it doesn't know that what you had drawn on the canvas was text, the canvas is just a bunch of 'pixels' as far as it is concerned.

MDN 讨论了画布字体问题和建议在加载字体之前不要绘制画布文本.

MDN discusses the canvas font issue and has a recommendation for not drawing the canvas text until the font is loaded.

借助 FontFace API，您可以在画布中使用字体之前显式加载字体.

With the help of the FontFace API, you can explicitly load fonts before using them in a canvas.

let f = new FontFace('myCusomFont', 'url(myCustomFont.ttf)');

f.load().then(function() {
  // Ready to use the font in a canvas context
  let ctx = document.getElementById('canvas').getContext('2d');
  ctx.font = "20px myCustomFont";
  ctx.fillText('Hello World', 150, 250);
});

我猜你想结合一些检查字体确实在合理的时间内加载(例如，如果字体服务器不在你的控制范围内，它会不会停机?)您知道将可用的字体.

I guess you'd want to combine that with some check that the fontface does actually load within a reasonable time (for example, if the font server is outside your control could it be down?) and if not fall back to some font you know will be available.

注意:检查 caniuse 是否支持您必须支持的所有浏览器.它受 Chrome/Edge、FF、Safari 支持，但不受 IE 支持，因此如果您仍需要支持 IE，则需要感知并添加解决方法，例如在超时到期之前不会在画布上绘图.

Note: check caniuse that the API is supported by all the browsers you have to support. It is supported by Chrome/Edge, FF, Safari but not by IE so if you still need to support IE you'll need to sense that and add a workaround e.g. not drawing on the canvas until a timeout has expired.

这篇关于当我用fillText() 写东西时，为什么我的自定义字体不会显示?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！