Question

我正在使用带有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 3.2.2的fabric js letest版本，此代码将完美工作。但是当我使用Fabric js 1.7.22版时显示小文本

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

我在Google上花了很多钱来解决此问题，但无法解决。

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

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

Answer 2

经过大量的Google冲浪，我发现fontFace不支持将字符串的以下类型作为第一个参数。因此，为了帮助其他开发人员，我提出了解决方案

以下字体家族模式在Fabric JS中无法完美呈现例如新的FontFace（“ exo 2”，font_path）;

此处是字体系列名称，例如exo 2

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

Fabric js字体系列问题

2 个答案: