问题描述
这是我的代码,在加载脚本之前,我已将字体加载到头部 这是该代码
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.fillStyle = "#ffffff";
context.fillRect(0,500,1000);
context.beginPath();
context.fillStyle = "#000000";
context.font = "30px Pacifico,cursive";
context.fillText("Hello World",canvas.width / 2,canvas.height / 2);
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet"/>
<canvas id="myCanvas"></canvas>
解决方法
问题是如何将Google字体(字体名称中带有空格)中的草书字体包含在画布元素中
事实证明,提问者不需要在使用的字体中留空格,并且给出的代码可以正常工作(除了缺少的img)。
但是,如果有人登陆这里想知道如何在Google字体中添加字体名称中带有空格的字体,下面是一个示例:
body {
background-color: #6B6B6B;
margin: 50px;
font-family: Arial;
color: white;
font-size: 14px;
font-weight: 100;
line-height: .2;
letter-spacing: 1px;
}
即只需包含空格,无需翻译成任何东西。