Шрифты появляются на холсте только после их предыдущего использования на странице.

Question

Я установил некоторые шрифты на странице, как это:

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

и шрифты хорошо отображаются на веб-странице.

Проблема в том, что на этой странице также есть холст, и когда я пишу на нем с установленными шрифтами, отображаются только те, которые используются на веб-странице (остальные заменяются системными шрифтами).

Пример: на этой следующей странице только 2 из 3 шрифтов будут работать на холсте.

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>

это результат:

Но тогда, если я использую 3-й шрифт в элементе страницы, он, наконец, появится на холсте:

новый 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>

Но это не лучшая практика. Как я могу использовать установленные шрифты на холсте, не добавляя их в элементы моей веб-страницы?

Answer 1

Да, браузеры будут загружать шрифты только в том случае, если они нуждаются в этом, т. Е. Если есть активные элементы, которые его используют.

Теперь в поддерживаемых браузерах (т.е. всех, кроме MS) вы можете использовать API загрузки шрифтов CSS , чтобы лучше контролировать, как и когда загружаются эти шрифты:

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>