從文件中加載字體以用於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元素

回答

相關問題