Как бы я импортировал шрифты из шрифтов Google в JavaScript, чтобы я мог использовать его для своего холста? - PullRequest
Новая
       5

Как бы я импортировал шрифты из шрифтов Google в JavaScript, чтобы я мог использовать его для своего холста?

0 голосов
/ 19 октября 2019

Я пытаюсь импортировать шрифты 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: недопустимый тег версии

Ответы [ 2 ]

1 голос
/ 19 октября 2019

Используемая вами ссылка на шрифт на самом деле является ссылкой на таблицу стилей.

Вы можете получить прямую ссылку на шрифт, перейдя по ссылке на таблицу стилей.

Она отобразитследующий CSS: 

/* cyrillic-ext */
@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v16/FwZY7-Qmy14u9lezJ-6K6MmBp0u-zK4.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v16/FwZY7-Qmy14u9lezJ-6D6MmBp0u-zK4.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v16/FwZY7-Qmy14u9lezJ-6I6MmBp0u-zK4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v16/FwZY7-Qmy14u9lezJ-6J6MmBp0u-zK4.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v16/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Просто возьмите ссылку на любую версию шрифта, которую вы хотите использовать, и добавьте ее вместо того места, где вы сейчас добавляете таблицу стилей.

0 голосов
/ 19 октября 2019

Вы загружаете таблицу стилей, а не шрифт.

Вот решение: 

    <!DOCTYPE html>
    <html lang = "en">
    <head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Pacifico&display=swap">
    </head>
        <body>
            <canvas id="canvas" width="400" height="400"></canvas>
            <!--window.onload won't work without this because there is nothing waiting for the link to load-->
            <span id="loader" style="font-family: Pacifico;">I am used for loading</span>
    <script>
    var c = document.getElementById("canvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle="rgb(0,0,0)";
    window.onload = function() {
      document.getElementById("loader").style.display="none"
      ctx.font="20px Pacifico";
      ctx.fillText("I am inside of canvas",200,200);
      ctx.stroke();
    }
    </script>
    </body>
    </html>
...