Question

Canvas.filltext不会呈现自定义字体（尽管会显示正文文本，而canvas.filltext会呈现本地字体）

我想使用一种称为jelleebold的自定义字体在画布上绘制一些文本。这是我希望可以完成的功能的缩写版本：

function paintLinkNameOnCanvas(linkName, canvas){
    let context = canvas.getContext('2d');
    context.font = "25px jelleebold";
    context.fillText(linkName, 50, 50);             
    return canvas;
}

但是，所使用的字体是浏览器（Chrome）用作备用字体的任何字体（我认为是Times New Roman）。这是html链接

<link href="./CSS/stylesheet.css" rel="stylesheet" type="text/css">

和css，从fontsquirrel下载，并进行了修改以适合我的本地目录结构：

@font-face {
    font-family: jelleebold;
    src: url('/fonts/jellee-roman-webfont.woff2') format('woff2'),
         url('/fonts/jellee-roman-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

我相信这可行，并且Jelleebold已成功加载，因为index.php包含：

<body style ="font-size: 50px; font-family: 'jelleebold'">
    <div id= "output" >
    test
    </div> 

    etc.

在jelleebold中印有“测试”一词。

相反，如果paintLinkNameOnCanvas函数指定本地计算机上安装的字体（例如context.font =“ 25px'Balford Base'”），则链接名的确会以该字体绘制。

那么为什么不使用自定义字体在画布上绘制链接名呢？

在Renato Bibiano提出非常有帮助的建议之后，我现在生成了该功能的更新版本（如下所示）。注释行暗示了下一个问题。如何使其与woff和woff2格式的字体一起使用？它适用于任何一个，但不适用于另一个。

function paintLinkNameOnCanvas(linkName, canvas){
    let earl = "";
//      earl += "url('/fonts/jellee-roman-webfont.woff' ) format('woff' ";
//      earl += ", ";
        earl += "url('/fonts/jellee-roman-webfont.woff2')format('woff2')";
    let f = new FontFace("jelleebold", earl);
    f.load().then(function() {
        let context = canvas.getContext('2d');
        context.font = '23px jelleebold';
        context.fillText('Hey, world', 0, 100);               
        });
    return canvas;
}

我认为删除斜线应该会产生一些合理的意义，但是如果同时包含两个规范（woff和woff2），输出将恢复为默认字体TNR。

无法获取画布以显示自定义字体

0 个答案: