Question

我正在使用此代码

在fabric js中添加简单的text元素

var t = new fabric.IText("Hello world !", {
    backgroundColor: '#FFFFFF',
    fill: '#000000',
    fontSize: 25,
    top : 50,
    left:50
});
canvas.add(t);

它的工作完美，现在发布我正在添加这样的样式字体，

<style type="text/css">
    @import url(//fonts.googleapis.com/css?family=Playfair+Display);
</style>

然后使用像这样的fabricjs将textbox添加到画布中，

var t = new fabric.IText("Hello world !", {
    backgroundColor: '#FFFFFF',
    fill: '#000000',
    fontFamily:'Playfair Display',
    fontSize: 25,
    top : 50,
    left:50
});
canvas.add(t);

应用字体，但是当我点击画布中的texbox时，你会发现文本框有这样的问题http://awesomescreenshot.com/0f05taz2f3。但只有在您第一次加载页面或强制重新加载ctrl+f5页面时才会发生这种情况。这是fiddle第二次加载完美。

Answer 1

添加文字时，字体尚未完全加载。这意味着Fabric正在根据默认字体而不是webfont来确定元素的宽度。

您可以等到字体加载后再添加到画布。 This question对如何正确执行此操作有一些答案。

Answer 2

这是Fabric的GitHub仓库中的known issue，它被认为正在进行中。

文本框导致织物js中的字体问题

2 个答案: