Canvas JavaScript字体注册异常：部署后字体无法显示求助

本地运行Discord机器人时，Canvas注册的字体正常显示，但部署到托管服务器后字体失效，相关代码如下：

const { AttachmentBuilder } = require('discord.js');
const { SlashCommandBuilder } = require('@discordjs/builders');
const Canvas = require('@napi-rs/canvas');

const { registerFont } = require('canvas');
registerFont('./Comic Sans MS.ttf', { family: 'Comic Sans' })

const canvas = Canvas.createCanvas(1150, 800);
const ctx = canvas.getContext('2d');

const background = await Canvas.loadImage('./image.png');
ctx.drawImage(background, 0, 0, canvas.width, canvas.height);

ctx.fillStyle = '#270a1f';
ctx.fillRect(0, canvas.height - 400, canvas.width, 400);

ctx.strokeStyle = '#ff033e';
ctx.strokeRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = '#0000ff'
ctx.beginPath();

已设置字体样式但仍无效：

ctx.font = '50px "Comic Sans"';
ctx.fillStyle = '#412227';

以下是针对性的解决步骤：

• 修正字体文件路径
  服务器工作目录与本地可能存在差异，相对路径易失效。改用绝对路径定位字体文件：

  const path = require('path');
  // 用__dirname拼接绝对路径，确保字体文件与当前代码文件层级一致
  const fontPath = path.join(__dirname, 'Comic Sans MS.ttf');
  registerFont(fontPath, { family: 'Comic Sans' });
  

  同时确认字体文件已完整上传至服务器对应目录。

• 解决Canvas库冲突问题
  代码同时引入@napi-rs/canvas和canvas两个库，二者字体注册逻辑不兼容。统一使用@napi-rs/canvas的注册方式：

  const Canvas = require('@napi-rs/canvas');
  // 直接调用Canvas.registerFont，无需导入canvas包的registerFont
  Canvas.registerFont(path.join(__dirname, 'Comic Sans MS.ttf'), { family: 'Comic Sans' });
  

  移除const { registerFont } = require('canvas');一行，避免库冲突导致字体注册失败。

• 验证服务器字体文件可访问性
  在代码中加入文件存在性检查，确认服务器能读取到字体文件：

  const fs = require('fs');
  const fontPath = path.join(__dirname, 'Comic Sans MS.ttf');
  if (!fs.existsSync(fontPath)) {
    console.error('字体文件不存在:', fontPath);
  } else {
    Canvas.registerFont(fontPath, { family: 'Comic Sans' });
  }
  

  若打印错误提示，说明文件路径错误或未上传成功。

• 确认字体名称引用正确
  设置ctx.font时，确保字体族名称与注册时的family完全一致，两种写法均有效：

  ctx.font = '50px Comic Sans';
  // 或带引号的写法：ctx.font = '50px "Comic Sans"';
  

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