canvas绘制字体时遇到Bookshelf Symbol 7字体bug

原创于 2021-10-12 14:14:19 发布 · 424 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #html #javascript

JS 专栏收录该内容

3 篇文章

订阅专栏

本文揭示了在JavaScript中使用Canvas绘制时，遇到BookshelfSymbol7字体名的bug，通过实例说明了正确引用字体的方法，并提醒开发者注意字体名包含数字时的处理技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS使用canvas绘制字体时，如果像以下代码设置字体为Bookshelf Symbol 7时会出现bug，不显示实际字体效果

    let font_txt = document.getElementById("canvas");
    let ctx = font_txt.getContext("2d");
    font_txt.height = font_txt.height;//重置画布（看个人需求可写可不写）
    ctx.font = "50px Bookshelf Symbol 7";
    ctx.fillText("测试", 50, 90);

此时将写法改成以下方式则可以正常显示字体效果

    let font_txt = document.getElementById("canvas");
    let ctx = font_txt.getContext("2d");
    font_txt.height = font_txt.height;//重置画布（看个人需求可写可不写）
    ctx.font = "50px 'Bookshelf Symbol 7'";
    //如果是变量font为字体名时则为ctx.font = "50px '" + font + "'";
    ctx.fillText("测试", 50, 90);

当字体名中包含数字则会这样，工作中踩的坑，记录一下