如何使用系统字体信息填充 canvas 字体属性？

Question

我正在试验 Node Canvas（HTML5 Canvas 在 NodeJS 中的实现），尝试用不同的字体编写简单的文本。

我可以使用 node-system-fonts 库的 getavailablefonts 函数很好地提取系统字体数据，它给我的数据类似于

[
  {
    "path": "/Library/Fonts/AcademyEngravedLet.ttf",
    "postscriptName": "AcademyEngravedLetPlain",
    "family": "Academy Engraved LET",
    "style": "Plain",
    "weight": 400,
    "width": 5
  },
  {
    "path": "/Library/Fonts/Impact.ttf",
    "postscriptName": "Impact",
    "family": "Impact",
    "style": "Regular",
    "weight": 900,
    "width": 4
  }
]

在 Canvas 本身中，我可以使用 font 字符串指定字体信息，如 w3schools.com/TAgs/canvas_font.

中所述


import { createCanvas } from "canvas";

import { WIDTH, HEIGHT } from "../config";

const write = (text, font, fontStyle) => {
  const canvas = createCanvas(WIDTH, HEIGHT);
  const ctx = canvas.getContext("2d");

  ctx.fillStyle = "black";
  ctx.font = `${Math.abs(WIDTH / Math.PI)}px ${font}`;
  ctx.fontStyle = fontStyle;
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.fillText(text, WIDTH / 2, HEIGHT / 2, WIDTH - 20); // text, x, y, max width

  return canvas;
};

但我正在努力将字体数据中的字体 family 和 style 与应该进入 ctx.font 属性的内容正确关联。

在 Impact 的情况下，字体字符串 200px Impact 为我提供了系统默认字体而不是 Impact 字体。但是 200px Academy Engraved LET 工作正常。

同时将 ctx.fontStyle 属性设置为字体 style 属性的值似乎没有任何作用。

是否有说明如何将系统字体映射到 canvas 字体属性的文档？

Answer 1

在实际 canvas 来源中进行了一番挖掘之后，我已经开始工作了。

/**
 * Convert the font data into a font string.
 *
 * @param {string} size A font size string (eg 100px or 50%/55% etc)
 * @param {object} font The font data, including `{ style, family }`
 * @returns {string} The font string
 */
const stringifyFont = (size, { style, family }) =>
  [style, size, family].filter(Boolean).map(String).join(" ");

export default stringifyFont;

我还发现它有助于注册字体，因为它帮助我清除了由于各种原因而不起作用的字体。

import { registerFont } from "canvas";

const registerFonts = (fonts) => {
  fonts.forEach(({ path, family, weight, style }) => {
    registerFont(path, { family, weight, style });
  });
};

export default registerFonts;

如何使用系统字体信息填充 canvas 字体属性？

How do I use system font information to populate a canvas font property?

javascript

fonts

canvas

node.js

如何使用系统字体信息填充 canvas 字体 属性？

How do I use system font information to populate a canvas font property?

javascript

fonts

canvas

node.js

如何使用系统字体信息填充 canvas 字体属性？