我如何在服务器端节点js上加载Google字体

Question

我正在使用节点js和canvas创建在特定图像上写入文本的API。我成功创建了-> /：sometext /：fontsize /：color /：position-x /：position-y之类的路由，并发送了具有给定字体大小，颜色和位置的文本的静态图像在画布上。

我无法实现的是，我想在路径中发送字体系列并将其显示在屏幕上。另外，没有其他方法可以加载至少Google字体而不必下载.ttf文件。

我尝试过的：

1. GetGoogleFonts npm软件包（这是个坏主意，因为它被卡在安装中）
2. WebFontLoader（给出“未定义窗口”错误）

复制步骤

当前，我正在使用ttf文件加载字体

router.get('/thumbnail/:name/:fontsize/:color/:posx/:posy', function (req, res, next) {
  let name = req.params.name;
  let fontsize = req.params.fontsize
  let positionx = req.params.posx 
  let positiony = req.params.posy
  let color = req.params.color

  let myimage = 'static/image1.jpg'

  const canvas = createCanvas(2000, 1000)
  const ctx = canvas.getContext('2d')
  var str = "hi "+name
  registerFont('AvenirNext.ttf', { family: 'Avenir Next' })
  loadImage(myimage).then((image) => {
  ctx.drawImage(image, 0 , 0, 2000, 1000);
  ctx.font = fontsize + "px Avenir Next"
  ctx.fillStyle = color
  ctx.fillText(str, positionx, positiony);

  const out = fs.createWriteStream(__dirname + '/test.jpeg')
  const stream = canvas.createJPEGStream()
  stream.pipe(res)
  out.on('finish', () =>  console.log('The JPEG file was created.'))

})
});

Answer 1

来自docs for registerFont

要使用未安装为系统字体的字体文件，请使用registerFont（）向Canvas注册该字体。 必须在创建画布之前完成。

^{重点不是我的}

您将其称为之后是您创建的画布。

registerFont

但是请注意，这将尝试加载服务器上可用的字体。如果要使其以：//fonts.googleapis.com服务器上的字体为目标，则需要将完整的URI传递给字体文件（不适用于.css）。

此外，您的姓氏应包含在引号（

// first register the font
registerFont('AvenirNext.ttf', { family: 'Avenir Next' });
// then create the canvas
const canvas = createCanvas(2000, 1000);
const ctx = canvas.getContext('2d');
var str = "hi " + name;

）中，因为它包含空格：

"

Answer 2

如果您不想在自己的服务器上托管ttf文件，则可以尝试使用ctx.font = fontsize + 'px "Avenir Next"'; 。

Google Font Github repo

我在此示例中使用的字体：

let fontFamily = req.params.fontfamily; // example: ArchivoNarrow

registerFont( 'https://github.com/google/fonts/blob/master/ofl/' + fontFamily.toLowerCase() + '/' + fontFamily + '-Regular.ttf?raw=true', { family: fontFamily });