javascript - 字体仅在之前在页面中使用过后才会出现在 Canvas 上

Question

我在页面中安装了一些字体，如下所示:

@font-face {
  font-family: Amsterdam Graffiti;
  src: url("./fonts/amsterdam.ttf");
}

字体在网页中显示得很好。

问题是:这个页面也有一个 Canvas ，当我用安装的字体在上面写字时，只显示网页中使用的那些(其他的被系统字体替换)。

示例:在下一页中，3 种字体中只有 2 种可以在 Canvas 上使用。

JS:

window.onload = function(){
var fontprevcanvas = document.getElementById("fontprevcanvas");
var ctx = fontprevcanvas.getContext("2d");

ctx.font='28px Amsterdam Graffiti';
ctx.textAlign = "center"; 
ctx.fillText('test1', 40, 40);

ctx.font='28px Army Rust';
ctx.textAlign = "center"; 
ctx.fillText('test2', 40, 80);

ctx.font='28px Badaboom BB';
ctx.textAlign = "center"; 
ctx.fillText('test3', 40, 120);
};

CSS:

@font-face {
  font-family: Amsterdam Graffiti;
  src: url("./fonts/amsterdam.ttf");
}

@font-face {
  font-family: Army Rust;
  src: url('./fonts/ARMY RUST.ttf');
}

@font-face {
  font-family: Badaboom BB;
  src: url('./fonts/BADABB__.TTF');
}

HTML:

<a style="font-family: Amsterdam Graffiti; ">part of the body</a>
<a style="font-family: Army Rust; ">part of the body</a>

<canvas id="fontprevcanvas" width="180" height="180" style="border:1px solid #000000;">
</canvas>

这是结果:

但是，如果我在页面元素中使用第三种字体，它最终会显示在 Canvas 中:

新的 HTML:

<a style="font-family: Amsterdam Graffiti; ">part of the body</a>
<a style="font-family: Army Rust; ">part of the body</a>
<a style="font-family: Badaboom BB; ">part of the body</a>

<canvas id="fontprevcanvas" width="180" height="180" style="border:1px solid #000000;">
</canvas>

结果:

作为解决方法，我在页面的隐藏元素中使用字体(它也不适用于 display:none)，如下所示:

<a style="font-family: Amsterdam Graffiti; visibility: hidden;">.</a>
<a style="font-family: Traveling Typewriter; visibility: hidden;">.</a>
<a style="font-family: Army Rust; visibility: hidden;">.</a>
<a style="font-family: Badaboom BB; visibility: hidden;">.</a>
<a style="font-family: Carnivalee Freakshow; visibility: hidden;">.</a>
<a style="font-family: Chinese Rocks; visibility: hidden;">.</a>
<a style="font-family: Cloister Black; visibility: hidden;">.</a>
<a style="font-family: Code; visibility: hidden;">.</a>
<a style="font-family: Hand of Sean; visibility: hidden;">.</a>
<a style="font-family: Ringbearer; visibility: hidden;">.</a>

但这似乎不是最佳实践。 如何在不将其添加到网页元素的情况下使用 Canvas 中安装的字体？

Answer 1

是的，浏览器只会在必要时变暗时加载字体，即如果有一些事件元素确实在使用它。

现在，在支持浏览器(即除 MS 之外的所有浏览器)时，您可以使用 CSS Font Loading API能够更好地控制加载这些字体的方式和时间:

if(window.FontFace) {
  // first declare our font-face
  const fontFace = new FontFace(
    'Shadows Into Light',
    "local('Shadows Into Light'), local('ShadowsIntoLight'), url(https://fonts.gstatic.com/s/shadowsintolight/v7/UqyNK9UOIntux_czAvDQx_ZcHqZXBNQzdcD55TecYQ.woff2) format('woff2')"
  );
  // add it to the list of fonts our document supports
  document.fonts.add(fontFace);
  // load the font
  fontFace.load()
    .then(draw);
}
else {
  console.log('fallback to some dummy element in the doc');
}

function draw() {
  const ctx = canvas.getContext('2d');
  ctx.font = "30px 'Shadows Into Light'";
  ctx.fillText("my text", 40, 40);
}

<canvas id="canvas"></canvas>