Использование локальных шрифтов в чертеже html5 canvas text

Question

Я пытаюсь создать простой инструмент, например, meme-генератор, используя холст HTML5. Можно ли использовать локальные шрифты на мобильном телефоне (это цель для мобильных устройств) на холсте?

Answer 1

Вы можете указать любой шрифт на холсте. Вы должны быть в состоянии что-либо, что CSS будет принимать

var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 
ctx.font = "Arial 30px"; 

Answer 2

@Akxe правильно отвечает, что вы можете .fillText с использованием локальных шрифтов для рисования на html5 холст типа.

Также распространено вытаскивание необходимых шрифтов от различных интернет-хостов.

Вот пример того, как загрузить веб-шрифт & рисовать с ним на html5 холст:

// load google font == Monoton 
 
WebFontConfig = { 
 
    google:{ families: ['Monoton'] }, 
 
    active: function(){start();}, 
 
}; 
 
(function(){ 
 
    var wf = document.createElement("script"); 
 
    wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js'; 
 
    wf.async = 'true'; 
 
    document.head.appendChild(wf); 
 
})(); 
 

 

 
var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 

 
function start(){ 
 
    ctx.font = '40px Monoton'; 
 
    ctx.textBaseline = 'top'; 
 
    ctx.fillText('Monoton Font', 20, 10); 
 
    var width=ctx.textMetrics('No').width; 
 
    console.log(width); 
 
}

body{ background-color: ivory; padding:10px; } 
 
#canvas{border:1px solid red;}

<h4>"Monoton" font drawn on canvas is a downloaded web font</h4> 
 
<canvas id="canvas" width=400 height=100></canvas>