如何在 p5.js 中加载图标字体

Question

我正在按照代码训练中的教程将网络摄像头图像转换为 ASCII 文本，但我想加载我自己的字体，但它不起作用

https://editor.p5js.org/donnarikhof/sketches/OfA5yWCE7 这是草图的链接。你可以看到网络摄像头工作但字体没有加载（我也已将其上传到文件）

我尝试了 loadfont 但似乎不起作用。

let myFont;

function preload() {
  myFont = loadFont("NewFont-Regular.otf");
}

我有一段时间没有使用 p5.js 所以如果有人知道如何帮助我将不胜感激！

Answer 1

原因是你只是将html文本放入div中，而不是在画布中绘制。

所以你可以使用CSS添加字体

@font-face {
  font-family: 'MyWebFont';
  src:  url("NewFont-Regular.otf") format('otf');
}

body {
   font-family: `MyWebFont`
}