La función loadFont() se utiliza para cargar una fuente desde un archivo o una URL y devolverla como un objeto PFont. La fuente cargada es un archivo de fuente de tipo abierto con los formatos .otf o .ttf .
Este método es de naturaleza asíncrona y, por lo tanto, es posible que no finalice antes de que se pueda usar la fuente. Por lo tanto, se recomienda cargar la fuente en la función preload() . La fuente se carga preferiblemente desde una ruta relativa, ya que algunos navegadores pueden impedir la carga desde otras ubicaciones remotas debido a las funciones de seguridad del navegador.
Sintaxis:
loadFont(path, callback, onError)
Parámetros: Esta función acepta tres parámetros como se mencionó anteriormente y se describe a continuación:
- ruta: Es la ruta desde donde se debe cargar la fuente. puede ser un
- devolución de llamada: esta es una función que después de que se carga la fuente y es un parámetro opcional.
- onError: esta es una función que se llama si la fuente no se carga debido a algún error y es un parámetro opcional.
Valor devuelto: Devuelve un objeto p5.Font con la fuente dada.
Los siguientes ejemplos ilustran la función loadFont() en p5.js:
Ejemplo 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); }
Producción:
Ejemplo 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'); }
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/loadfont
Nota: No se puede acceder a esta función a través de un compilador en línea porque falta el archivo de fuente.
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA