Fabric js字体家族问题答案

【问题标题】：Fabric js font family issueFabric js字体家族问题
【发布时间】：2019-12-17 21:06:02
【问题描述】：

我正在使用带有 Angular 7 的 Fabric js 版本 1.7.22，并且我正在制作文本编辑器。我的问题是，当我使用以下代码将文本添加到带有自定义字体的画布中时。

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 letest 版本的fabric js 3.2.2，这段代码就完美了。但是当我使用fabric js 1.7.22版时显示小文本

我的整个项目都是旧版本，无法更新版本。

我在谷歌上花了很多时间来解决这个问题，但无法解决。

是否有任何Patch 支持所有字体名称之王。请帮我。请参阅下面的小提琴生成问题： https://jsfiddle.net/Mark_1998/pxr9yz7g/

【问题讨论】：

标签： javascript fonts fabricjs

【解决方案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();

如果您遇到字体系列问题，请尝试使用谷歌字体。请按照以下代码进行操作

添加到页面顶部

<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();

【讨论】：

仅供参考，如果您在 fontFamily 中使用句点 .，您可能会自找麻烦；只有字符和间距。

【解决方案2】：

经过大量谷歌浏览后，我发现 fontFace 不支持以下类型的字符串作为第一个参数。因此我将解决方案提供给其他开发人员以帮助他们

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

这里是字体系列名称，例如exo 2

如果以数字字结尾则无效，表示最后一个字符是数字并且在该空格之前
任何以数字开头的单词都无效
如果名称包含任何点则无效
如果名称以数字开头则无效

【讨论】：