node-canvas:使用自定义字体

Question

我想知道如何在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 =‘粗体40某些someGibberish'；字体大小应用正确。

Answer 1

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

Answer 2

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

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

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