节点画布：使用自定义字体

Posted 2023-03-14

【中文标题】节点画布：使用自定义字体

【英文标题】：node-canvas: Using custom font

【发布时间】：2015-12-07 21:59:38

【问题描述】：

我想知道如何在 node-canvas 中使用自定义字体。

这是我的尝试，但到目前为止它不起作用：

var Canvas = require('canvas')
    , Image = Canvas.Image
    , Font = Canvas.Font
    , path = require('path');

var gubblebum = new Font('gubblebum', fontFile('GUBBLO___.ttf'));

function fontFile(name) 
  return path.join(__dirname, '../fonts', name);


function draw() 
  var canvas = new Canvas(100, 100)
    , ctx = canvas.getContext('2d');

  ctx.addFont(gubblebum);
  ctx.font = 'bold 40 gubblebum';
  ctx.fillText('test', 25, 45);

  return canvas;


module.exports = draw;

在浏览器中呈现时，字体和大小保持不变。

字体文件已正确加载。否则会抛出异常。

有趣的是，当我执行 ctx.font = 'bold 40 someGibberish';字体大小已正确应用。

【问题讨论】：

现在看来 node-canvas 上的字体坏了，看起来你需要禁用 pango，但我仍在尝试弄清楚如何做到这一点并为模块重建跨度>

【参考方案1】：

所以我最终让节点画布使用自定义字体。

首先我使用的是旧版本的 Cairo。我使用 Brew 安装所有依赖项，因为它告诉我我拥有哪些以及哪些链接正确，然后一旦所有依赖项都正常工作，我从 Brew 卸载了 Cairo 版本并安装了 1.12.X 版本（补丁我认为是第 18 版）开罗。这解决了字体大小的 Mac OSX 问题，但我无法加载字体。

经过一番调查，我发现最新的 Node Canvas 模块也存在问题，所以我在 package.json 中将版本硬设置为 1.1.0，最后我得到了自定义字体以正确加载和调整大小。

所以 TL;DR：使用 Cairo 版本 1.12.X 和 Node Canvas 1.1.0，我认为它应该可以工作吗？我花了一段时间才让它工作。

【讨论】：

您能否详细说明如何设置？您是否从源代码克隆并编译了 Cairo 1.12.X？或者您是否以某种方式通过 brew 安装了旧版本？到目前为止，我已经从源代码克隆并构建了 1.12.X 版本，但尝试运行 npm install canvas 会产生更多错误，即使将 PKG_CONFIG_PATH 设置为编译 cairo 的 src 文件夹也是如此。

我必须通过源代码找到它。我去拿了 tarball 并手动安装了它，然后用它替换了 brew 版本，然后将它链接到正确的所需包。 IIRC。已经有一段时间了，我从使用 node-canvas（因为它很痛苦）换成了使用效果更好的 node-gd。

【参考方案2】：

这现在应该在 node-canvas 2.0+ 中“正常工作”。请参阅新的Canvas.registerFont 方法：https://github.com/Automattic/node-canvas/#registerfont。