仅在safari中出现问号而不是文字,使用fabricjs - 文本框

时间:2017-08-16 11:10:43

标签: javascript canvas safari fabricjs

在画布上使用Fabric js,在加载等随机事件时,更改字体系列/ fontsize / fontstyle会出现问号而不是文本。除了safari和iOS safari之外,所有浏览器都能正常工作。

enter image description here

以下是字体系列列表: -

$scope.fontFamilies = [
            {name:'Abril Fatface',value:'Abril Fatface',type:'400'},
            {name:'Aldrich',value:'Aldrich',type:'400'},
            {name:'Alex Brush',value:'Alex Brush',type:'400'},
            {name:'Allura',value:'Allura',type:'400'},
            {name:'Balthazar Regular',value:'Balthazar',type:'400'},

            {name:'Crimson Text Regular',value:'Crimson Text',type:'400'},

            {name:'Graduate',value:'Graduate',type:'400'},
            {name:'Gravitas One',value:'Gravitas One',type:'400'},
            {name:'Great Vibes',value:'Great Vibes',type:'400'},
            {name:'Italianno',value:'Italianno',type:'400'},
            {name:'Ledger',value:'Ledger',type:'400'},
            {name:'Limelight',value:'Limelight',type:'400'},
            {name:'Mate SC Regular',value:'Mate SC',type:'400'},
            {name:'Michroma',value:'Michroma',type:'400'},
            {name:'Montserrat Regular',value:'Montserrat',type:'400'},
            {name:'Mr De Haviland Regular',value:'Mr De Haviland',type:'400'},

            {name:'Open Sans Condensed Light',value:'Open Sans Condensed',type:'300'},

            {name:'Open Sans Regular',value:'Open Sans',type:'400'},

            {name:'Oswald',value:'Oswald',type:'400'},

            {name:'Rosarivo',value:'Rosarivo',type:'400'},

            {name:'Stint Ultra Condensed',value:'Stint Ultra Condensed',type:'400'},

            {name:'Syncopate Regular',value:'Syncopate',type:'400'},
            {name:'Vast Shadow',value:'Vast Shadow',type:'400'}

        ];

下面的一些代码和流程: 创建对象

  var canvas = this.__canvas  =  new fabric.Canvas('canvasArea',
                    {selection:false,
                    allowTouchScrolling:true,
                    preserveObjectStacking: true});

然后从json加载画布

canvas.loadFromJSON(res.data.templateJson, function() {
..
}

下面是更改字体系列函数

 $scope.updateFontFamily = function (family) {
            console.log(family);
            var tempFontFamily = {};
            for(var loop=0;loop<$scope.fontFamilies.length;loop++) {
                if(family==$scope.fontFamilies[loop].name){
                    tempFontFamily.type = $scope.fontFamilies[loop].type;
                    tempFontFamily.value = $scope.fontFamilies[loop].value;
                }
            }
            var tObj = canvas.getActiveObject();
            tObj.setFontFamily(tempFontFamily.value);
            tObj.setFontStyle(tempFontFamily.type);
            var text = tObj.getText();
            tObj.setText("");
            tObj.setText(text);
            canvas.renderAll();
        }

导入索引文件中的所有字体系列

@import url('https://fonts.googleapis.com/css?family=Abril+Fatface');
            @import url('https://fonts.googleapis.com/css?family=Aldrich');
            @import url('https://fonts.googleapis.com/css?family=Alex+Brush');
            @import url('https://fonts.googleapis.com/css?family=Allura');
            @import url('https://fonts.googleapis.com/css?family=Balthazar');
            @import url('https://fonts.googleapis.com/css?family=Crimson+Text:400,400i,600');
            @import url('https://fonts.googleapis.com/css?family=Goudy+Bookletter+1911');
            @import url('https://fonts.googleapis.com/css?family=Graduate');
            @import url('https://fonts.googleapis.com/css?family=Gravitas+One');
            @import url('https://fonts.googleapis.com/css?family=Great+Vibes');
            @import url('https://fonts.googleapis.com/css?family=Italianno');
            @import url('https://fonts.googleapis.com/css?family=Ledger');
            @import url('https://fonts.googleapis.com/css?family=Limelight');
            @import url('https://fonts.googleapis.com/css?family=Mate+SC');
            @import url('https://fonts.googleapis.com/css?family=Michroma');
            @import url('https://fonts.googleapis.com/css?family=Montserrat');
            @import url('https://fonts.googleapis.com/css?family=Mr+De+Haviland');
            @import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300i,700');
            @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,800');
            @import url('https://fonts.googleapis.com/css?family=Oswald:400,700');
            @import url('https://fonts.googleapis.com/css?family=Rosarivo:400,400i');
            @import url('https://fonts.googleapis.com/css?family=Stint+Ultra+Condensed');
            @import url('https://fonts.googleapis.com/css?family=Syncopate:400,700');
            @import url('https://fonts.googleapis.com/css?family=Vast+Shadow');

0 个答案:

没有答案