Блог

Главная - Вопросы по программированию - Как включить скорописный шрифт из Google fonts (с пробелами в имени шрифта) в элемент canvas

Как включить скорописный шрифт из Google fonts (с пробелами в имени шрифта) в элемент canvas

#javascript #html #css #google-fonts

#javascript #HTML #css #google-шрифты

Вопрос:

Вот мой код, и у меня есть шрифт, загруженный в начале перед загрузкой скрипта, вот код для этого

 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=Pacificoamp;display=swap" rel="stylesheet"/>

<canvas id="myCanvas"></canvas>

Комментарии:

1. ну и что img ?

2. Вам не нужно указывать cursive в шрифте, просто название Pacifico . Единственная актуальная проблема, похоже, img не существует. В противном случае этот код работает.

3. ваш img не объявляется. нарисуйте какой img?

4. Я только что опубликовал часть своего кода, img работает нормально, прошу прощения за публикацию половины кода, но я просто подумал, что могу показать соответствующие детали

5. кстати, фактическое имя шрифта — {‘Pacifico’, cursive}, и когда я попробовал Pacifico, он не работал

Ответ №1:

Вопрос заключался в том, как включить скорописный шрифт из Google fonts (с пробелами в имени шрифта) в элемент canvas

Оказывается, спрашивающему не нужен пробел в используемом шрифте, и приведенный код работал нормально (за исключением отсутствующего img).

Однако, на случай, если кто-то приземлится здесь, желая узнать, как включить шрифт из Google fonts с пробелами в имени шрифта, вот пример:

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

т.е. просто включите пробелы, не нужно переводить ни во что.