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

【问题标题】：Loading a font from a file to use in a P5.JS dom element从文件加载字体以在 P5.JS dom 元素中使用
【发布时间】：2017-07-03 01:47:30
【问题描述】：

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

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

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

任何帮助将不胜感激。

【问题讨论】：

标签： javascript fonts p5.js

【解决方案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);
    }
 }

抱歉，我在移动设备上的格式不正确

【讨论】：

感谢您的及时回复！我实际上最终创建了一个链接元素并使用 Google Fonts var newStyle = document.createElement('link'); 加载它var url = new URL("fonts.googleapis.com/css?family=Roboto"); newStyle.href = url; newStyle.rel = "stylesheet"; document.head.appendChild(newStyle);
各自有什么缺点/优点吗？
@NicholasSiebenaller 我认为从文件加载速度更快，但实际上并没有太大区别
@NicholasSiebenaller 如果此答案有帮助，您应该考虑通过单击此答案左侧的勾号将其标记为已接受，祝您有美好的一天:)
这实际上并没有回答问题。您只是在画布上绘图，而不是设置外部 dom 元素的字体。

【解决方案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";

【讨论】：