Загрузка шрифта из файла для использования в элементе P5.JS dom

Question

У меня возникли проблемы с использованием пользовательских шрифтов внутри p5.js dom. Я могу загрузить шрифт в var, но не знаю, как стилить конкретный элемент с этим var.

Это то, что я пытался ...

вар robotoReg = LoadFont ("Roboto-Regular.ttf"); document.getElementById ("mStockOne"). Style.fontFamily = "robotoReg";

Любая помощь будет оценена по достоинству.

Answer 1

Вы просто должны сохранить шрифт в глобальной переменной:

var myFont, fontReady = false; 

function fontRead(){ 
    fontReady = true; } 

function preload() { 
    myFont = loadFont("./fonts/MyfontFile.ttf", fontRead); } //replace with correct path 

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

function draw() { 
    background(255); 
    if (fontReady) { 
     textFont(myFont); 
     text("Hello World!", 10, 30); 
    } 
} 

Извините за неправильного им форматирования на мобильном

Answer 2

Ваш вопрос отвечает the P5.js reference:

Вы можете также используйте строковое имя шрифта для стилей других элементов HTML .

var myFont; 

function preload() { 
    myFont = loadFont('assets/Avenir.otf'); 
} 

function setup() { 
    var myDiv = createDiv('hello there'); 
    myDiv.style('font-family', 'Avenir'); 
} 

Проблема заключается в том, что вы используете имя переменной, чтобы установить шрифт элемента DOM, который не будет работать. Вам нужно использовать имя фактического шрифта.

var robotoReg = loadFont("Roboto-Regular.ttf"); 
document.getElementById("mStockOne").style.fontFamily = "Roboto";