p5.js | textFont()函数

p5.js 中的textFont()函数用于指定将用于使用 text()函数绘制文本的字体。在 WEBGL 模式下，仅支持 loadFont() 方法加载的字体。

句法：

textFont( font, size )

参数：该函数接受上面提到的两个参数，如下所述：

• 字体：它是一个字符串，它指定网络安全字体的名称或由 loadFont()函数加载的字体对象。
• size：它是一个数字，指定要使用的字体大小。它是一个可选参数。

返回值：它是一个包含当前字体的对象。

以下示例说明了 p5.js 中的textFont()函数：

示例 1：此示例显示了所有系统上普遍可用的 Web 安全字体的使用。

function setup() {
  createCanvas(600, 300);
  textSize(30);
  
  textFont('Helvetica');
  text('This is the Helvetica font', 20, 80);
  textFont('Georgia');
  text('This is the Georgia font', 20, 120);
  textFont('Times New Roman');
  text('This is the Times New Roman font', 20, 160);
  textFont('Courier New');
  text('This is the Courier New font', 20, 200);
}

输出：

示例 2：此示例显示了使用 loadFont()函数加载的字体。

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

输出：

在线编辑器： https://editor.p5js.org/

环境设置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

参考： https://p5js.org/reference/#/p5/textFont