p5.js | textFont()函数

textFont()函数是p5.js中用于设置文本字体的函数。可以通过调用该函数来设置文本的字体，使其呈现出不同的样式。

语法

textFont(font, [size])

参数说明：

• font：用于设置文本的字体，可以是系统预设字体或自定义字体，如"Arial"、"Helvetica"、"Georgia"等。也可以使用.ttf或.otf等字体文件进行自定义设置。
• size（可选）：用于设置文本的大小，默认为12。

使用示例

function setup() {
  createCanvas(400, 400);
  textFont("Arial");
}

function draw() {
  background(220);
  textSize(24);
  text("Hello World", 100, 100);
}

在上面的示例中，我们设置了文本的字体为Arial，并将文本内容设置为"Hello World"，大小为24。

示例解释

在这个示例中，我们首先使用textFont()函数将文本字体设置为Arial。接着，在draw()函数中，我们设置了文本大小为24，并通过text()函数在(100, 100)的位置绘制了文本"Hello World"。

如果不使用textFont()函数，则会使用默认字体绘制文本：

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  textSize(24);
  text("Hello World", 100, 100);
}

自定义字体

除了使用系统预设字体，我们还可以通过加载.ttf或.otf等字体文件来实现自定义字体的功能。在p5.js中加载字体文件可以使用loadFont()函数：

let font;

function preload() {
  font = loadFont('font.ttf');
}

function setup() {
  createCanvas(400, 400);
  textFont(font);
}

function draw() {
  background(220);
  textSize(24);
  text("Hello World", 100, 100);
}

在上面的示例中，我们使用loadFont()函数加载了一个名为font.ttf的字体文件，再通过textFont()函数将该字体设置为文本字体。最终绘制的文本将使用该自定义字体进行呈现。

小结

通过textFont()函数，我们可以设置p5.js中文本的字体种类，可以使用系统预设字体或自定义字体文件。该函数与其他文本相关函数一起使用，可以实现更加丰富的文本呈现效果。