文本框导致结构 JS 中的字体出现问题

textbox causing issue with font in fabric js

本文关键字：字体 问题 JS 结构 文本      更新时间：2023-09-26

我使用此代码在织物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 强制重新加载页面时发生。这是小提琴第二次完美加载。

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

您可以等到字体加载完毕后再添加到画布。这个问题有一些关于如何正确做到这一点的答案。

这是 Fabric GitHub 存储库上的一个已知问题，假设正在处理中。

相关文章：