如何将谷歌字体中的草书字体（字体名称中带有空格）包含到画布元素中答案

【问题标题】：How to include a cursive font from google fonts(with spaces in the font name) into a canvas element如何将谷歌字体中的草书字体（字体名称中带有空格）包含到画布元素中
【发布时间】：2020-09-25 02:23:03
【问题描述】：

这是我的代码，我在加载脚本之前在头部加载了字体这是代码

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');
context.fillStyle = "#ffffff";
context.fillRect(0, 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>

【问题讨论】：

那么img 是什么？
你不需要在字体中提到cursive，名字就是Pacifico。唯一的实际问题似乎是 img 不存在。否则该代码有效。
您的 img 未被声明。画什么img？
我刚刚发布了我的一小部分代码，img 工作正常，很抱歉发布了一半的代码，但我只是想我可能会显示相关细节
顺便说一句，实际字体名称是 {'Pacifico', cursive}，当我尝试 Pacifico 时它不起作用

标签： javascript html css google-fonts

【解决方案1】：

问题是如何将谷歌字体中的草书字体（字体名称中带有空格）包含到画布元素中

事实证明，提问者不需要在所使用的字体中有空格，并且给出的代码运行良好（除了缺少 img）。

但是，如果有人来到这里想知道如何在字体名称中包含带有空格的 google 字体中的字体，这里有一个示例：

<link href='https://fonts.googleapis.com/css?family=PT Serif Caption' rel='stylesheet'>

即只需包含空格，无需翻译任何内容。

【讨论】：