我正在尝试将 google 字体导入 javascript，因此我可以使用这些字体在画布上绘制文本。问题是我收到错误。
错误1：无法解码下载字体
错误2：OTS解析错误
这是针对我正在开发的网页，我查找了问题，但他们建议的解决方案，我不明白。
<!DOCTYPE html>
<html lang = "en">
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var pacifico_font = new FontFace('Pacifico', 'url(https://fonts.googleapis.com/css?family=Pacifico&display=swap)');
pacifico_font.load().then(function(loaded_face) {
document.fonts.add(loaded_face);
document.body.style.fontFamily = '"Pacifico", Pacifico';
}).catch(function(error) {
alert("An error occured, please continue.");
});
document.fonts.ready.then(function(font_face_set) {
var x = true;
return x;
});
ctx.fillStyle=rgb(0,0,0);
if(x===true){
ctx.font="20px Pacifico";
ctx.fillText("Hello Cody(testing)",200,200);
}
</script>
</body>
</html>
我希望画布显示文本，但它提醒我有错误，并且什么也没有。在控制台中它说：
无法解码下载的字体：https:
//fonts.googleapis.com/css ? family = Pacifico & display = swap OTS 解析错误：版本标签无效
炎炎设计
慕斯王
相关分类