Javascript 从文件加载字体以在P5.JS dom元素中使用

我目前在p5.js dom中使用自定义字体时遇到问题。我可以将字体加载到变量中，但不知道如何使用该变量设置特定元素的样式

这就是我试过的

var robotoReg=loadFont（“Roboto Regular.ttf”）； document.getElementById（“mStockOne”）.style.fontFamily=“robotoReg”

---

任何帮助都将不胜感激。

您只需将字体存储在全局变量中：

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

---

很抱歉，手机上的即时通讯格式不正确

您的问题已在中得到解答：

您还可以使用字体的字符串名称来设置其他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";

---

感谢您的及时回复！实际上，我最终创建了一个link元素，并用Google字体var newStyle=document.createElement（'link'）加载它；var url=newurl（“）；newStyle.href=url；newStyle.rel=“stylesheet”；document.head.appendChild（newStyle）；每种方法都有缺点/优点吗？@NicholasSiebenaller我认为从文件加载速度更快，但差别不大really@NicholasSiebenaller如果这个答案是有用的，你应该考虑把它标记为点击这个答案的左边的滴答声，祝你有一个美好的一天：这实际上并没有回答这个问题。您只是在画布上绘制，而不是设置外部dom元素的字体。