javascript - 文本框导致 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添加到 Canvas 中，如下所示，

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

应用字体后， 但是当我单击 Canvas 中的文本框时，您可以看到文本框存在如下问题http://awesomescreenshot.com/0f05taz2f3。但只有当您第一次加载页面或使用 ctrl+f5 强制重新加载页面时才会发生这种情况。 这是fiddle第二次加载完美。

Answer 1

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

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