如何在nodejs-canvas上安装谷歌字体？

Question

我正在尝试使用nodejs-canvas动态获取Google字体，但我不确定最佳方法是什么。 我知道需要使用“registerFont”方法。 现在我有的代码是：

const { registerFont, createCanvas, loadImage } = require('canvas')
//registerFont('comicsans.ttf', { family: 'Comic Sans' })
const canvas = createCanvas(200, 200)
const ctx = canvas.getContext('2d')

let name = req.query.name;

// Write "Awesome!"
ctx.font = '30px Impact'
ctx.rotate(0.1)
ctx.fillText(name, 50, 100)

// Draw line under text
var text = ctx.measureText(name)
ctx.strokeStyle = 'rgba(0,0,0,0.5)'
ctx.beginPath()
ctx.lineTo(50, 102)
ctx.lineTo(50 + text.width, 102)
ctx.stroke()

//console.log(canvas.toDataURL());

res.write('<img style="border:1px solid #000;" src="' + canvas.toDataURL() + '" />');
res.end();

- Noamway

Answer 1

使用PT Mono作为示例，这是如何操作的。

1. 首先，直接访问字体，例如PT Mono。 2. 接下来，点击右上角的“下载字体系列”链接。这将给您一个包含TTF字体的压缩文件。 3. 现在，将ttf文件复制到您的节点应用程序目录中，并在您的文件中使用registerFont进行注册，如下所示： registerFont('PtMono-Regular.ttf', { family: 'PT Mono' }); 根据文档，在创建画布之前确保注册您的字体。

然后，要在画布上使用您的字体，只需使用以下代码设置上下文的字体： ctx.font = "16px 'PT Mono'"; 完整示例是在node-canvs repo中修改原始示例。

const { registerFont, createCanvas } = require('canvas');
registerFont('PtMono-Regular.ttf', { family: 'PT Mono' });

const canvas = createCanvas(500, 500);
const ctx = canvas.getContext('2d');

ctx.font = `16px "PT Mono"`;
ctx.fillText('This is the font.', 250, 10);

- Loktar