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

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，据推测正在处理中。