Canvas与discord.js开发的Discord欢迎卡文字显示为▯问题咨询

文字显示「▯」占位符的核心原因是渲染所用字体在运行环境中缺失、或字体不支持待渲染字符的字符集：

1. 你代码中指定了Arial字体，若代码部署的服务器/容器环境未预装Arial字体，会导致所有文字渲染失败
2. 若新成员昵称包含中文、小语种、特殊符号、Emoji等Arial原生不支持的字符，也会出现占位符

修复步骤 #

• 步骤1：准备多语言兼容字体
  下载支持全字符集的开源字体（如Noto Sans系列，支持绝大多数语言、特殊符号与Emoji），将字体文件放到项目目录下，例如./fonts/NotoSans-Regular.ttf、./fonts/NotoColorEmoji.ttf
• 步骤2：注册自定义字体
  在代码初始化阶段（创建Canvas实例前）注册本地字体，无需依赖系统预装字体：

  const { registerFont, createCanvas } = require('canvas');
  // 注册自定义字体，family字段可自定义，后续渲染时直接用该名称即可
  registerFont('./fonts/NotoSans-Regular.ttf', { family: 'NotoSans' });
  registerFont('./fonts/NotoColorEmoji.ttf', { family: 'NotoEmoji' });
  

• 步骤3：替换渲染字体配置
  将原代码中所有Arial字体替换为你注册的字体，可添加多个字体作为兜底：

  // 原120px Arial替换为
  ctx.font = '120px "NotoSans", "NotoEmoji", sans-serif';
  // 原60px Arial替换为
  ctx.font = '60px "NotoSans", "NotoEmoji", sans-serif';
  

• 可选兼容优化（适配高版本discord.js）
  若你使用v13及以上版本的discord.js，附件发送写法需要调整为files参数形式，避免图片发送失败：

  // 原发送代码替换为
  member.guild.channels.cache.get("873169519881900033").send({
    content: `Hey <@${id}>Welkom in **${member.guild.name}**!`,
    files: [attachment]
  })
  

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