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 =＆＃39; bold 40 someGibberish＆＃39 ;;字体大小正确应用。

Answer 1

所以我最终得到了节点画布来使用自定义字体。

首先我使用了旧版的开罗。我使用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，它应该可以工作吗？我花了一段时间才开始工作。

Answer 2

现在应该在node-canvas 2.0中使用“Just Work”（目前处于alpha但相对稳定）。请参阅新的Canvas.registerFont方法：https://github.com/Automattic/node-canvas/#registerfont-for-bundled-fonts。

node-canvas：使用自定义字体

2 个答案: