JS Canvas api 错误地渲染字体

Question

我在我的项目中导入了 Neue-Plak 半粗体字体：

我使用

context

api 并尝试使用以下方式渲染文本：

  const width = 1456
  const height = 816
  const canvas = createCanvas(width, height)
  const context = canvas.getContext('2d')

  registerFont(plakSemiBoldPath, { family: 'NeuePlak-SemiBold' })
  context.fillStyle = '#FFF'
  context.font = '80px NeuePlak-SemiBold'
  context.fillText("367.34x", 100, 525)

然后我将渲染的文本覆盖到模板上

sharp

:

  sharp(templatePath)
  .composite([{ input: textBuffer, blend: 'over' }])
  .toFile('./image_output/test.png', (err, info) => {
    if (err) reject("Error generating image " + err)
    resolve(true)
  })

问题是，尽管我提供了半粗体字体，但输出呈现的是超轻版本的文本：

我尝试了几件事：

• 将字体转换为其他格式。
• 从其他来源下载字体。
• 修改

  context.font()

中的字体粗细参数

没有任何效果。

我也很确定字体不是可变的，因为它在下载时为您提供了几个样式文件：

Answer 1

我设法使用 FontForge 提取我感兴趣的字符并将它们粘贴到新字体中来解决这个问题。然后要导出它，只需执行“文件”->“生成字体”并单击“生成”即可。

我必须尝试一下生成选项才能使其正常工作。这些是我用过的（不知道是否需要，通过反复试验得到的）

生成字体时可能会遇到以下问题：“非整数坐标”。通过选择所有字符来修复，转到 Element -> Round -> To Int

说实话，我不知道为什么会这样，也不知道原始字体的问题是什么。也许字体专家可能会有所帮助！