如何在 fabricJS 中应用 .otf 字体？

Question

我有 .otf 字体列表，大约 200 种字体。

我正在使用 opentype.js 加载这些字体，如下所示：

opentype.load('HelveticaNeueLTStd-BdCn.otf', (err, font) => {
    if (err) {
        console.error('Error loading font ', err);
        return
    }
    canvas.getActiveObject().set('fontFamily', 'HelveticaNeueLTStd-BdCn');
    canvas.requestRenderAll();
});

但是它没有应用我从 .otf 加载的任何字体系列，如果我对 .ttf 做同样的事情那么它工作正常。

Answer 1

可以使用此代码：首先从服务器加载字体，然后将这些字体注入 html 的 head 标记中，如 font-face:

  const a = '<style> @font-face {\n' +
            '    font-family: ' + fontFileName + ';\n' +
            '    src: url(' + url + ') format("opentype");\n' +
            '}</style>';
  $('head').append(a);

url 是：字体文件的 blob。

如何在 fabricJS 中应用 .otf 字体？

How to apply .otf fonts in fabricJS?

fonts

canvas

opentype

fabricjs

angular