使用会标字体的结构文本在画布上无法正确呈现

Question

我目前正在开展一个项目，在这个项目中，我使用fabric js创建一个画布，向用户展示他们的首字母在monogram样式图像中的样子。问题是画布没有正确渲染文本。

渲染文本如下所示：

pls click this link

但是当我点击图片中的任何地方时都会被修复。它应该是这样的：

pls click this link

我像这样创建画布：

public function print_form_initials（$ initials）{

// LESS HELPER
.clearfix()
{
    &:after, &:before{
       content: " "; /* Older browser do not support empty content */
       visibility: hidden;
       display: block;
       height: 0;
       clear: both;
    }
}

我使用font-face属性加载字体。我做错了什么？

Answer 1

问题在于，在创建画布时，尚未加载字体。 使用一些带回调的字体加载器或使用一些延迟技术在1或2秒后再次渲染画布。