Question

我正在尝试将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解析错误：版本标记无效

Answer 1

您使用的字体链接实际上是指向样式表的链接。

您可以通过访问样式表链接来获得指向字体的直接链接。

它将显示以下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;
}

只需获取指向您要使用的任何字体版本的链接，然后将其添加到您当前添加样式表的位置即可。

Answer 2

您正在加载样式表而不是字体。

这是解决方案：

    <!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>

如何将字体从Google字体导入到javascript中，以便可以将其用于画布？

2 个答案: