结构 js 字体系列问题

Question

我正在使用带有角度 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();
});

如果我使用织物 js letest 版本的结构 js 3.2.2，这段代码可以完美地工作。 但是当我使用织物JS版本1.7.22时显示小文本

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

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

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

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

将其添加到页面顶部

<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

经过大量的谷歌冲浪，我发现fontFace不支持以下字符串类型作为第一个参数，所以我把解决方案是为了帮助另一个开发人员

遵循字体系列的模式在织物JS中不完美呈现 例如，新的字体("exo 2"，font_path);

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

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