Question

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

这就是我尝试过的......

var robotoReg = loadFont（＆＃34; Roboto-Regular.ttf＆＃34;）; document.getElementById（＆＃34; mStockOne＆＃34;）。style.fontFamily =＆＃34; robotoReg＆＃34;;

任何帮助都将不胜感激。

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";

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

2 个答案: