javascript - 在Fabric.js中使用远程Web字体初始化加载的文本

我正在使用Fabric JS开发大型自定义应用程序，并且我已经做得很好。但是我有一个使用webfont的初始化加载文本对象的问题。

只要该字体在客户端计算机上是本地的，我就可以正常工作，否则，不会加载Web字体，并且 Canvas 上的文本对象将以默认的sans-serif字体系列呈现。

简而言之，这就是我的工作(在本例中，我将“allstar”用作我的网络字体):

CSS:将CSS加载到fabric.js之前的heads中的fonts.css中

@font-face{
    font-family:'allstar';
    src:
        url('/path-to-fonts/all_star-webfont.eot');
    src:
        url('/path-to-fonts/all_star-webfont.eot?#iefix') format('embedded-opentype'),
        url('/path-to-fonts/all_star-webfont.woff') format('woff'),
        url('/path-to-fonts/all_star-webfont.ttf') format('truetype'),
        url('/path-to-fonts/all_star-webfont.svg#allstarregular') format('svg');
    font-weight:normal;
    font-style:normal
}

Javascript:，它加载在页面底部的$(document).ready(function(){})中

var textSample = new fabric.Text(text, {
    fontFamily: "allstar",
});
canvas.add(textSample);
canvas.renderAll();

如果我在页面上的其他地方使用字体(例如:在带有点和字体的透明span标记中)，则效果很好。但是我认为这不是编码的正确方法。

我使用fabric.js版本1.3.0

最佳答案

问题:

Canvas 可立即渲染

Google加载webfonts

Canvas直到下一个重新渲染它的事件之前都不知道

解决方案:

Canvas 可立即渲染

Google加载带有回调

的Webfonts

您强制渲染

Canvas 现在具有

http://jsfiddle.net/vvL6f/6/

WebFontConfig = {
    google: { families: [ 'Ribeye::latin', 'Lora::latin', 'Croissant+One::latin', 'Emblema+One::latin', 'Graduate::latin', 'Hammersmith+One::latin', 'Oswald::latin', 'Oxygen::latin', 'Krona+One::latin', 'Indie+Flower::latin', 'Courgette::latin', 'Ranchers::latin' ] }
};

(function() {
    var src = ('https:' === document.location.protocol ? 'https' : 'http') +
        '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';

    $.getScript(src, function(data) {
        // Not sure why I need to run this twice but it makes it load the font and then reposition the font to it's correct coords.
        canvas.renderAll();
        canvas.renderAll();
    });
})();