Fabric js字体族问题

Question

我是使用fabric js版本为1.7.22和Angular 7进行文本编辑器开发。 我的问题是，当我使用以下代码将文本添加到画布中时，使用自定义字体：

...

var canvas= new fabric.Canvas('c');
var junction_font = new FontFace('3d.demo', 'url(https://fonts.gstatic.com/s/bethellen/v1/WwkbxPW2BE-3rb_JNT-qIIcoVQ.woff2)');
junction_font.load().then(function (loaded_face) 
{
  console.log('loaded.font', loaded_face);
  document['fonts'].add(loaded_face);
  var text = new fabric.IText("lazy dog jumps over crystle guy.", {
    top: 10,
    left: 10,
    fontFamily: '3d.demo'
    })
  canvas.add(text);
  canvas.renderAll();
});

这段代码在使用最新版本的fabric js 3.2.2时运行正常，但在使用版本1.7.22时会显示小字。我的整个项目都是旧版的，无法更新版本。我在Google上花了很多时间来解决这个问题，但无法解决。是否有任何Patch可以支持所有字体名称？请帮帮我。请查看下面的fiddle以生成问题：https://jsfiddle.net/Mark_1998/pxr9yz7g/

- Mayur Kukadiya

Answer 1

如果您的字体已经完美工作，只需要调整字体大小，请按照下面的代码操作。如果字体不能正常工作，请告诉我，我会更新代码。

  var text = new fabric.IText('lazy dog jumps over crystle guy.',{
                left: 10,
                top: 10,
                fontFamily: '3d.demo',
                fill: '#fff',
                stroke: '#000',
                strokeWidth: .1,
                fontSize: 36,
            });
            canvas.add(text);
            canvas.renderAll();

如果您的字体族存在问题，请尝试使用 Google 字体。请按照以下代码进行操作：

在页面顶部添加如下内容：

<link href='https://fonts.googleapis.com/css?family=Poppins|Roboto|Oswald|Arial|Lobster|Pacifico|Satisfy|Bangers|Audiowide|Sacramento' rel='stylesheet' type='text/css'>

 var text = new fabric.IText('lazy dog jumps over crystle guy.',{
                    left: 10,
                    top: 10,
                    fontFamily: 'Arial',
                    fill: '#fff',
                    stroke: '#000',
                    strokeWidth: .1,
                    fontSize: 36,
                });
                canvas.add(text);
                canvas.renderAll();

- Soubhagya Kumar Barik

---

请注意，如果在fontFamily中使用句号“.”，可能会引起问题；最好只包含字符和间距。 - Kalnode

Answer 2

在浏览了许多谷歌搜索结果后，我发现fontFace不支持以下类型的字符串作为第一个参数。因此，我提供了解决方案，以帮助其他开发人员。

以下字体族的模式在fabric js中无法完美呈现，例如：new FontFace("exo 2", font_path);

这里的字体族名称是 exo 2

1. 如果名称以数字结尾并且前面有空格，则无效
2. 如果名称以任何数字开头，则无效
3. 如果名称包含任何点，则无效
4. 如果名称以数字开头，则无效

- Mayur Kukadiya