我想知道是否有一种方法可以使用Canvas context.font使用的自托管Web字体。请参考下面的代码，了解我是如何尝试实现这一点的。任何建议或帮助将不胜感激。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
@font-face
{
font-family:arial;
src:url("fonts/arial.ttf");
}
@font-face
{
font-family: avant_garde;
src:url("fonts/avant_garde.ttf");
}
@font-face
{
font-family: times_new_roman;
src:url("fonts/times_new_roman.ttf");
}
@font-face
{
font-family: garamond;
src:url("fonts/garamond.ttf");
}
@font-face
{
font-family: trajan_pro;
src:url("fonts/trajan_pro.otf");
}
@font-face
{
font-family: albertus_lt;
src:url("fonts/albertus_lt.ttf");
}
@font-face
{
font-family: monotrype_corsiva;
src:url("fonts/monotrype_corsiva.ttf");
}
@font-face
{
font-family: lucida_causal;
src:url("fonts/lucida_causal.ttf");
}
@font-face
{
font-family: benguait_gothic_bk;
src:url("fonts/benguait_gothic_bk.ttf");
}
@font-face
{
font-family: engravers_gothic;
src:url("fonts/engravers_gothic.ttf");
}
@font-face
{
font-family: futura_bk;
src:url("fonts/futura_bk.ttf");
}
@font-face
{
font-family: eurostile;
src:url("fonts/eurostile.ttf");
}
@font-face
{
font-family: copper_lt;
src:url("fonts/copper_lt.ttf");
}
@font-face
{
font-family: korinna;
src:url("fonts/korinna.ttf");
}
@font-face
{
font-family: souviner;
src:url("fonts/souviner.ttf");
}
@font-face
{
font-family: tekton_pro_blend;
src:url("fonts/tekton_pro_blend.otf");
}
@font-face
{
font-family: garamond_drop_caps;
src:url("fonts/garamond_drop_caps.ttf");
}
</style>
<script type="text/javascript" src="http://code.jquery.com//jquery-3.1.1.min.js"></script>
<script>
CanvasRenderingContext2D.prototype.roundedRect = function (x, y, width, height, radius)
{
this.save();
this.translate(x, y);
this.moveTo(width / 2,0);
this.arcTo(width,0,width,height, Math.min(height / 2, radius));
this.arcTo(width, height, 0, height, Math.min(width / 2, radius));
this.arcTo(0, height, 0, 0, Math.min(height / 2, radius));
this.arcTo(0, 0, radius, 0, Math.min(width / 2, radius));
this.lineTo(width / 2,0);
this.restore();
}
$(function() {
var canvas = $('#myCanvas')[0];
var context = canvas.getContext('2d');
context.beginPath();
context.roundedRect(0, 0, canvas.width, canvas.height, 0);
context.lineWidth=2;
context.strokeStyle="#000000";
context.stroke();
$('#nametag').bind('change keyup input', updateCanvas);
$('.line1').bind('click', updateCanvas);
$('.line2').bind('click', updateCanvas);
$('.line3').bind('click', updateCanvas);
function updateCanvas() {
var maxWidth = canvas.width;
var styling = $('.style').val();
console.log(styling);
context.clearRect(0, 0, canvas.width, canvas.height,0);
if (styling =='Round') {
context.beginPath();
context.roundedRect(0, 0, canvas.width, canvas.height, 25);
context.lineWidth=2;
context.strokeStyle="#000000";
context.stroke();
} else {
context.beginPath();
context.roundedRect(0, 0, canvas.width, canvas.height, 0);
context.stroke();
}
//Style Font
if($('.font').val() == 'arial'){
$('#textEntry1, #textEntry2, #textEntry3').css("font-family", "arial");
} else if($('.font').val() == 'avantgarde'){
$('#textEntry1, #textEntry2, #textEntry3').css("font-family", "avant_garde");
} else if($('.font').val() == 'timesnewroman'){
$('#textEntry1, #textEntry2, #textEntry3').css("font-family", "times_new_roman");
} else if($('.font').val() == 'garamond'){
$('#textEntry1, #textEntry2, #textEntry3').css("font-family", "garamond");
} else if($('.font').val() == 'trajanpro'){
$('#textEntry1, #textEntry2, #textEntry3').css("font-family", "trajan_pro");
} else if($('.font').val() == 'albertuslt'){
$('#textEntry1, #textEntry2, #textEntry3').css("font-family", "albertus_lt");
} else if($('.font').val() == 'monotypecorsiva'){
$('#textEntry1, #textEntry2, #textEntry3').css("font-family", "monotrype_corsiva");
} else if($('.font').val() == 'lucidacasual'){
$('#textEntry1, #textEntry2, #textEntry3').css("font-family", "lucida_causal");
} else if($('.font').val() == 'benguaitgothicbk'){
$('#textEntry1, #textEntry2, #textEntry3').css("font-family", "benguait_gothic_bk");
} else if($('.font').val() == 'engraversgothic'){
$('#textEntry1, #textEntry2, #textEntry3').css("font-family", "engravers_gothic");
} else if($('.font').val() == 'futurabk'){
$('#textEntry1, #textEntry2, #textEntry3').css("font-family", "futura_bk");
} else if($('.font').val() == 'eurostile'){
$('#textEntry1, #textEntry2, #textEntry3').css("font-family", "eurostile");
} else if($('.font').val() == 'cooperlt'){
$('#textEntry1, #textEntry2, #textEntry3').css("font-family", "copper_lt");
} else if($('.font').val() == 'garamonddropcaps'){
$('#textEntry1, #textEntry2, #textEntry3').css("font-family", "garamond_drop_caps");
} else if($('.font').val() == 'korinna'){
$('#textEntry1, #textEntry2, #textEntry3').css("font-family", "korinna");
} else if($('.font').val() == 'souvinerlt'){
$('#textEntry1, #textEntry2, #textEntry3').css("font-family", "souviner");
} else if($('.font').val() == 'tektonproblend'){
$('#textEntry1, #textEntry2, #textEntry3').css("font-family", "tekton_pro_blend");
}
context.textAlign = "center";
context.fillText($('.line1').val(), canvas.width * 0.5, 70, maxWidth);
context.fillText($('.line2').val(), canvas.width * 0.5, 90, maxWidth);
context.fillText($('.line3').val(), canvas.width * 0.5, 120, maxWidth);
}
});
</script>
</head>
<body>
<div style="font-family: arial"> </div>
<div style="font-family: avant_garde"> </div>
<div style="font-family: times_new_roman"> </div>
<div style="font-family: garamond"> </div>
<div style="font-family: trajan_pro"> </div>
<div style="font-family: albertus_lt"> </div>
<div style="font-family: monotrype_corsiva"> </div>
<div style="font-family: lucida_causal"> </div>
<div style="font-family: benguait_gothic_bk"> </div>
<div style="font-family: engravers_gothic"> </div>
<div style="font-family: futura_bk"> </div>
<div style="font-family: eurostile"> </div>
<div style="font-family: copper_lt"> </div>
<div style="font-family: korinna"> </div>
<div style="font-family: souviner"> </div>
<div style="font-family: tekton_pro_blend"> </div>
<div style="font-family: garamond_drop_caps"> </div>
<form action="" method="POST" id="nametag" class="nametag">
<b>Name Tag</b><br>
<div id="canvas-container">
<canvas id="myCanvas" width="200" height="200"></canvas>
</div>
<br><br>
<div id="style">
<label>Style:</label>
<select class="style" name="style" style="width:250px;">
<option></option>
<option>Round</option>
<option>Square</option>
</select>
</div>
<br />
<div>
<label for="font">Font: </label>
<select name="font" class="font" id="font">
<option></option>
<option value="arial">Arial</option>
<option value="avantgarde">Avant Garde</option>
<option value="timesnewroman">Times New Roman</option>
<option value="garamond">Garamond</option>
<option value="trajanpro">Trajan Pro</option>
<option value="albertuslt">Albertus Lt</option>
<option value="monotypecorsiva">Monotype Corsiva</option>
<option value="lucidacasual">Lucida Casual</option>
<option value="benguaitgothicbk">Benguait Gothic Bk</option>
<option value="engraversgothic">Engravers Gothic</option>
<option value="futurabk">Futura Bk</option>
<option value="eurostile">Eurostile</option>
<option value="cooperlt">Cooper Lt</option>
<option value="garamonddropcaps">Garamond Drop Caps</option>
<option value="korinna">Korinna</option>
<option value="souvinerlt">Souviner Lt</option>
<option value="tektonproblend">Tekton Pro Blend</option>
</select>
</div>
<br />
<div id="line1">
<label>Line1:</label>
<input type="text" class='line1' name="line1" style="width:250px;" maxlength="50"/>
</div>
<br>
<div id="line2">
<label>Line2:</label>
<input type="text" class='line2' name="line2" style="width:250px;" maxlength="50"/>
</div>
<br>
<div id="line3">
<label>Line3:</label>
<input type="text" class='line3' name="line3" style="width:250px;" maxlength="50"/>
</div>
<br>
</form>
</body>
</html>