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

Posted 2023-03-25

【中文标题】如何在fabricJS中应用.otf字体？

【英文标题】：How to apply .otf fonts in fabricJS?

【发布时间】：2019-10-30 22:54:16

【问题描述】：

我有 .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 做同样的事情，那么它工作正常。

【问题讨论】：

我有点困惑：你用 opentype.js 做什么？看起来您所做的只是“使用画布中的字体”，您根本不需要 opentypejs：使用普通的@font-face 加载字体，然后使用您设置的字体系列名称画布的context.font = ...

的每种字体

@Mike'Pomax'Kamermans：感谢您的回复，我通过在 head 标签中注入动态字体来做到这一点，并且工作正常。

那么这个问题应该可以再删了：用常规方法，一切正常。

@Mike：与传统方法不同，它需要应用一些技巧才能使其发挥作用。

@mike：感谢 mike 的建议，我将在此处发布我的解决方案，以便其他人可以从中受益。

【参考方案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。