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

Question

我想知道如何在节点画布上使用自定义字体。

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

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'; 时 字体大小应用正确。

Answer 1

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

Answer 2

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

首先我使用了旧版本的 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 我认为它应该可以工作？我花了一段时间才让它发挥作用。