p5.js | función de fuente de texto()

La función textFont() en p5.js se usa para especificar la fuente que se usará para dibujar texto usando la función text(). En el modo WEBGL, solo se admiten las fuentes cargadas por el método loadFont().

Sintaxis:

textFont( font, size )

Parámetros: esta función acepta dos parámetros, como se mencionó anteriormente y se describe a continuación:

• fuente: es una string que especifica el nombre de la fuente web segura o un objeto de fuente cargado por la función loadFont().
• tamaño: Es un número que especifica el tamaño de la fuente a utilizar. Es un parámetro opcional.

Valor devuelto: Es un objeto que contiene la fuente actual.

Los siguientes ejemplos ilustran la función textFont() en p5.js:

Ejemplo 1: este ejemplo muestra el uso de fuentes web seguras que generalmente están disponibles en todos los sistemas.

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);
}

Producción:

Ejemplo 2: Este ejemplo muestra el uso de una fuente cargada mediante la función 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);
}

Producción:

Editor en línea: https://editor.p5js.org/

Configuración del entorno: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

Referencia: https://p5js.org/reference/#/p5/textFont