Question

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

只要该字体在客户端的计算机上是本地的，我工作正常，因为未加载webfont并且画布上的文本对象以默认的sans-serif字体系列呈现。

简而言之，我做的是（在这个例子中，我使用“allstar”作为我的webfont）：

CSS： css在fabric.js

之前的head.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

Answer 1

问题：

Canvas立即呈现
Google加载网络字体
Canvas直到下一个重新呈现的事件

解决方案：

Canvas立即呈现
Google使用回调加载网络字体
您强制渲染
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();
    });
})();

Answer 2

使用fabric.js和Google Web Fonts，以下代码适用于我：

小提琴：http://jsfiddle.net/DanBrown180/vvL6f/

CSS

<Style>
@font-face {
font-family: 'Jolly Lodger';
font-style: normal;
font-weight: 400;
src: local('Jolly Lodger'), local('JollyLodger'),
url(http://themes.googleusercontent.com/static/fonts/jollylodger/v1/RX8HnkBgaEKQSHQyP9itiaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}
<style>

的Javascript

<script type = "text/javascript">
canvas = new fabric.Canvas('c'); 
var text = new fabric.Text("Web Font Example", {
                    left: 200,
                    top: 30,
                    fontFamily: 'Jolly Lodger',
                    fill: '#000',
                    fontSize: 60
                });

canvas.add(text);
</script>

HTML

<canvas id="c" height="200px" width="400px"></canvas>

看起来是因为Google Web Fonts css代码使用：

src: local('Jolly Lodger'), local('JollyLodger')

CSS中的

Answer 3

我遇到了同样的问题。在某些事件被触发后字体呈现正确。因此，在创建对象后，我们可以将其设置为活动状态：

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

Answer 4

简短的方法：

<script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
<script>
WebFont.load({
            google: {
                families: [ 'Abel', 'Aclonica']
            },
            fontinactive: function(familyName, fvd) {
                console.log("Sorry " + familyName + " font family can't be loaded at the moment. Retry later.");
            },
            active: function() {
                // do some stuff with font   
                $('#stuff').attr('style', "font-family:'Abel'");
                var text = new fabric.Text("Text Here", {
                    left: 200,
                    top: 30,
                    fontFamily: 'Abel',
                    fill: '#000',
                    fontSize: 60
                });

                canvas.add(text);
            }
        });
</script>

很长的路When do web-fonts load and can you pre-load them?

有关网络字体加载器的更多信息https://github.com/typekit/webfontloader。

fabric.js具体https://groups.google.com/forum/#!topic/fabricjs/sV_9xanu6Bg

Answer 5

最好的方法是使用setTimeout（）;

setTimeout(function(){
    var activeObject = canvas.getActiveObject();
    activeObject.set({
        fontFamily: font,
        useNative: true
    });
canvas.renderAll();},500);

检查jsfiddle

http://jsfiddle.net/muthupandiant/x3ptsgex/1/

Answer 6

截至2017年，很容易在Firefox中使用Fabric.js中的网络字体。

您只需通过@import（在您的样式表中）或<link href="...">（在<head>中）添加它们。之后，您可以使用fabric.Text属性＆＃39; fontFamily＆＃39;选择您想要的任何字体。

关于您的初始问题，调用canvas.renderAll();应该重绘画布，从而正确显示所有加载的网络字体。

查看simple example on jsFiddle。

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

6 个答案: