在带有节点画布的 Web 浏览器中使用自定义字体

Question

在 node-canvas 中，我知道您可以根据文档使用 registerFont 来使用未安装为系统字体的自定义字体：https://www.npmjs.com/package/canvas#registerfont

此函数将本地字体文件的路径作为第一个参数。

在网络浏览器实现中，有什么方法可以实现类似的功能吗？如果已安装字体，我可以使用它，但我希望能够下载并注册自定义字体。

Answer 1

与 HTML Canvas 中的 registerFont 等效的是 CSS Font API。这里有一个例子：https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/font#Loading_fonts_with_the_CSS_Font_Loading_API

const f = new FontFace('test', 'url(x)');
await f.load();
ctx.font = '12px test';