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

Question

registerFont在节点画布中，我知道您可以按照文档使用未安装为系统字体的自定义字体： https ://www.npmjs.com/package/canvas#registerfont

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

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

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';