p5.js | loadFont()函数

loadFont()函数用于从文件或 URL 加载字体，并将其作为 PFont 对象返回。加载的字体是一个 opentype 字体文件，格式为.otf或.ttf 。
此方法本质上是异步的，因此在使用字体之前可能无法完成。因此建议在preload()函数中加载字体。字体最好从相对路径加载，因为由于浏览器的安全特性，某些浏览器可能会阻止从其他远程位置加载。
句法：

loadFont(path, callback, onError)

参数：此函数接受三个参数，如上所述，如下所述：

• 路径：这是必须加载字体的路径。它可以是一个
• callback：这是一个加载字体后的函数，它是一个可选参数。
• onError：这是一个函数，如果由于任何错误而无法加载字体，则调用该函数，它是一个可选参数。

返回值：它返回一个具有给定字体的p5.Font对象。
以下示例说明了 p5.js 中的loadFont()函数：
示例 1：

javascript

let newFont;
  
// Loading font
function preload() {
  newFont =
    loadFont('fonts/Montserrat.otf');
}
  
//  Canvas area and color
function setup() {
  createCanvas(400, 200);
  textSize(20);
  fill("red");
  text('Click once to write using '
        + 'a new font', 20, 20);
  fill("black");
  
  text('Using the default font', 20, 60);
  text('This is text written using'
        + ' the new font', 20, 80);
}
  
// Changing font
function mouseClicked() {
  textFont(newFont);
  textSize(20);
  text('Using the Montserrat font',
                        20, 140);
   
  text('This is text written using'
        + ' the new font', 20, 160);
}

输出：

示例 2：

javascript

let newFont;
  
// Canvas area and loading font
function setup() {
  createCanvas(500, 200);
  textSize(20);
  
  text('The new font would be displayed'
        + ' when loaded', 20, 20);
  loadFont('fonts/Montserrat.otf', fontLoaded);
}
  
// Changing font
function fontLoaded(newFont) {
  textFont(newFont);
  text('The font has completed loading!', 20, 60);
  
  let textDiv = createDiv('This is text written'
                + ' using the new font');
  textDiv.position(30, 80);
  textDiv.style('font-family', 'Montserrat');
}

输出：

在线编辑器： https://editor.p5js.org/
环境设置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
参考： https://p5js.org/reference/#/p5/loadfont
注意：此函数无法通过在线编译器访问，因为缺少字体文件。