You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

node-canvas无法加载自定义字体问题求助

Node-Canvas自定义字体加载失败的解决方案
  • 核对字体内部家族名
    警告里Pango查找的是"Alternate Gothic Cond ATF Condensed",说明它自动给你注册的家族名追加了样式后缀,核心问题是你设置的family名称和字体文件内部的真实家族名不匹配。
    用系统工具查看字体的真实家族名:Mac通过FontBook右键字体查看「字体信息」,Windows用字符映射表的「高级查看」面板,Linux直接执行fc-list命令。注册时必须严格使用这个真实名称,比如如果字体内部名是AlternateGothicCondATF,就把family设为该值。

  • 显式指定字体样式并引号包裹家族名
    注册字体时显式声明weight和style参数,避免Pango自动推断样式;设置ctx.font时把带空格的家族名用双引号包裹,防止空格被解析为样式分隔符:

    const canvas = require('canvas');
    const path = require('path');
    
    canvas.registerFont(path.resolve(__dirname, './src/fonts/alternate-gothic-cond-atf.otf'), {
      family: 'Alternate Gothic Cond ATF',
      weight: 'normal',
      style: 'normal'
    });
    
    const ctx = canvas.createCanvas(800, 600).getContext('2d');
    ctx.font = 'normal 60px "Alternate Gothic Cond ATF"';
    
  • 改用绝对路径并检查文件权限
    相对路径可能因node运行目录不同导致文件查找失败,用path.resolve生成绝对路径规避该问题。同时确保字体文件对node进程有读取权限。

  • 清除Pango字体缓存(Linux/macOS)
    若在Linux或macOS环境下,Pango的旧字体缓存可能干扰加载,执行fc-cache -fv命令清除缓存后,重启服务重试。

内容的提问来源于stack exchange,提问作者vvv

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.04 13:20:28