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

我目前在使用p5.js dom中的自定义字体时遇到问题。我可以加载字体到一个变种，但不知道如何样式与该变种的特定元素。从文件中加载字体以用于P5.JS dom元素

这是我已经试过......

VAR robotoReg = loadFont（ “的Roboto-Regular.ttf”）; document.getElementById（“mStockOne”）。style.fontFamily =“robotoReg”;

任何帮助，将不胜感激。

2017-02-14 Nicholas Siebenaller

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

对不起移动

来源

2017-02-14 17:56:47 Pepe

谢谢您的及时回复！我实际上最终创建了一个链接元素并使用Google Fonts加载它var newStyle = document.createElement（'link'）; var url = new URL（“https://fonts.googleapis.com/css?family=Roboto”）; newStyle.href = url; newStyle.rel =“stylesheet”; document.head.appendChild（newStyle）; –

每个人都有什么缺点/优点吗？ –

@NicholasSiebenaller我认为它更快从文件加载，但没有太大的区别 – Pepe

-1

你的问题的格式不正确的IM是在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";

来源

2017-02-15 02:27:44

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

回答

相关问题