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

Question

我目前在 p5.js dom 中使用自定义字体时遇到问题。我可以将字体加载到 var 中，但不知道如何使用该 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 中得到解答：

You can also use the string name of the font to style other HTML elements.

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 元素中使用

Loading a font from a file to use in a P5.JS dom element

javascript

fonts

p5.js