Canvas部署Heroku后Emoji显示异常，求兼容文本与Emoji的字体方案

问题根源 #

Heroku默认环境缺少同时兼容常规文本和彩色Emoji的字体支持，而本地系统通常自带这类字体，因此仅在部署后出现异常。

解决方案 #

1. 利用字体Fallback机制

为Canvas指定多个字体优先级，让渲染引擎自动为文本和Emoji匹配对应字体：

// 注册文本字体和Emoji字体
Canvas.GlobalFonts.registerFromPath("./font/Roboto-Bold.ttf", "Roboto Bold");
Canvas.GlobalFonts.registerFromPath("./font/NotoColorEmoji.ttf", "Noto Color Emoji");

// 设置字体时添加Fallback规则
context.font = "22px 'Roboto Bold', 'Noto Color Emoji'";
context.textAlign = 'left';
context.fillStyle = "#FFFFFF";
context.fillText(`🏫 channel`, 650, 292);

该方式会优先用Roboto渲染普通文本，遇到Emoji时自动切换到Noto Color Emoji处理。

2. 使用同时支持文本与Emoji的字体

以下字体原生支持双字符集，无需额外Fallback：

• Noto Sans（带Emoji支持版）：Google推出的多语言字体，覆盖文本和Emoji
• Segoe UI Emoji：Windows系统字体，需将字体文件部署到Heroku项目中
• Apple Color Emoji：苹果系统字体，同样需手动部署字体文件到项目

注意：部署字体时要确保字体文件被纳入Git仓库（不要添加到.gitignore），路径引用需准确。

3. 在Heroku环境安装系统字体包

通过构建脚本自动安装系统级字体，无需携带字体文件：
在package.json中添加构建脚本：

"scripts": {
  "postinstall": "apt-get update && apt-get install -y fonts-noto-color-emoji"
}

之后直接在代码中使用系统字体名设置Fallback：

context.font = "22px 'Roboto Bold', 'Noto Color Emoji'";

注意：该方式依赖Heroku的Ubuntu运行栈，确保环境支持apt命令。

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