javascript - 文本框导致Fabric JS中的字体出现问题

我正在使用此代码在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第二次加载完美。

最佳答案

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

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