如何在JavaScript中导入Google Fonts用于Canvas？加载报错求助

我来帮你搞定这个问题！你遇到的Failed to decode download fonts和OTS parsing error报错根源是FontFace的用法错误，还有几个小坑需要修正，咱们一步步来：

核心问题：FontFace传入了CSS链接而非字体文件 #

你给FontFace构造函数传的是Google Fonts的CSS样式表链接（https://fonts.googleapis.com/css?family=Pacifico），但这个链接返回的是CSS代码，不是实际的字体文件（比如.woff2格式）。浏览器把CSS文件当成字体文件去解析，自然会出现解析错误。

修正方案（两种可选，推荐第一种） #

方案1：用link标签引入Google Fonts（最简单可靠）

直接在HTML头部引入Google Fonts的CSS，浏览器会自动加载对应的字体文件，不需要手动用FontFace处理：

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 先引入Pacifico字体的CSS -->
    <link href="https://fonts.googleapis.com/css?family=Pacifico&display=swap" rel="stylesheet">
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script>
        var c = document.getElementById("canvas");
        var ctx = c.getContext("2d");
        
        // 等待所有字体加载完成后再绘制文本
        document.fonts.ready.then(function() {
            ctx.fillStyle = 'rgb(0,0,0)'; // 注意rgb要加引号
            ctx.font = "20px Pacifico";
            ctx.fillText("Hello Cody(testing)", 100, 200); // 调整x坐标让文本更居中
        }).catch(function(error) {
            alert("字体加载失败：" + error);
        });
    </script>
</body>
</html>

方案2：用FontFace直接加载字体文件（需要手动获取字体URL）

如果你非要用FontFace，可以打开Google Fonts的CSS链接，找到里面的字体文件URL（比如.woff2格式），然后传给FontFace：

<!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");
        
        // 直接传入Pacifico字体的woff2文件URL
        var pacifico_font = new FontFace('Pacifico', 'url(https://fonts.gstatic.com/s/pacifico/v22/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2)');
        pacifico_font.load().then(function(loaded_face) {
            document.fonts.add(loaded_face);
            // 字体加载完成后绘制
            ctx.fillStyle = 'rgb(0,0,0)';
            ctx.font = "20px Pacifico";
            ctx.fillText("Hello Cody(testing)", 100, 200);
        }).catch(function(error) {
            alert("字体加载失败：" + error);
        });
    </script>
</body>
</html>

还需要修正的其他小问题 #

1. 变量作用域错误：你在document.fonts.ready.then回调里定义的x是局部变量，外面的if(x===true)根本访问不到，所以绘制逻辑永远不会执行。正确的做法是把绘制代码放在字体加载完成的回调里。
2. fillStyle语法错误：rgb(0,0,0)需要用引号包裹成字符串，否则会被当成未定义的函数调用，导致报错。

内容的提问来源于stack exchange，提问作者Phoenix