Ios iPhone和iPad上乱码的Fabric js文本字符

我们正在使用Fabric js在画布中插入文本，我们正在插入两个文本，一个是一个较大的文本，可以正确加载，并且具有开放的SAN字体。另一个是一个较小的文本，这是我们遇到的问题，它有从谷歌字体库动态加载的动态字体。它不显示字符，而是在框中显示问号。我们尝试使用开放式Sans字体，但没有改变

有关更多说明，请查看以下链接 我使用了下面的代码，这是造成问题的原因

_preloadText: function(index,value)
        {
            var fontSize = value.default;
            var coords = this._getXYCoordinates(value.coordinates);
            var fontFamily = this.options.fontFamily;
            var options = $.extend({
                            fontFamily: fontFamily,
                            fontSize: fontSize,
                            useNative:true
                        },this._getOptions(coords.x,coords.y));
            if('text' == value.type)
            {
                options.fontStyle = 'bold';
                options.fontFamily = 'Open Sans';
                var title = new fabric.Text(value.text,options);
                this.canvasLayer2.add(title);
                this.canvasLayer2.centerObjectH(title);
                this.canvasLayer2.setActiveObject(title);
                this.canvasLayer2.renderAll();
            }else{
                /*The below code is where the problem of fallback font is.*/
                var slogan = new fabric.Text(value.text,options);
                this.canvasLayer3.add(slogan);
                this.canvasLayer3.centerObjectH(slogan);
                this.canvasLayer3.setActiveObject(slogan);
                this.canvasLayer3.renderAll();
            }           
        }

还有其他人也面临这个问题。您可以在iPhone或iPad中打开以下代码笔进行检查

我还发现fabric js github帐户中列出了此问题

但开发商在没有对评论支付任何费用的情况下突然关闭了这个问题

编辑

下面是初始化jquery小部件时首先调用的字体加载代码

_prepareFont: function(){
            var that = this;
            if(this.options.fontFamily !== null){
                require(['https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js'],function(WebFont){
                    WebFont.load({
                        google: {
                            families: [that.options.fontFamily]
                        },
                        active: function() {
                            that._prepareCanvas();
                            that._prepareControls();                            
                        },
                        fontactive: function(familyName, fvd){
                            that.options.fontFamily = familyName;
                        }
                    });
                });
            }
        }

在WebFont库中，我们加载字体，在活动事件中，我们调用_prepareControls方法，该方法将文本预加载到画布。如果我们没有从google WebFont库中获得所需的字体，我们将使用OpenSans字体，该字体已经添加到页面中

---

我们正在使用fabric.Text类的两个实例，一个是加载，另一个不是。

突然的开发人员me两次要求查看字体加载代码。 在画布上使用字体之前，浏览器必须先加载字体

否则，屏幕上会出现一个回退字体或垃圾

现在我把代码笔移到这里，我在2秒钟的超时时间内完成了标题。 您会注意到，在iphone/ipad或其他速度较慢的设备上，这2秒钟应该足够让google服务器先向您提供css字符串，然后再请求浏览器获取字体文件并让画布加载，而其他文本可能会变成垃圾，而标题线不应该这样做

$（文档）.ready（函数（）{
$（'.browser-type'）.html（bowser.name+''+bowser.version）；
var canvas=newfabric.canvas（'c'）；
$（'.fabric-type'）.html（fabric.version）；
var headline=new fabric.IText（'headline'{
“originX”：“中心”，
“原创”：“中心”，
“左”：512，
“顶级”：117，
“宽度”：83.6，
“高度”：56.5，
“填充”：“ffffff”，
“笔划”：空，
“冲程宽度”：0，
“strokeDashArray”：空，
“strokeLineCap”：“butt”，
“strokeLineJoin”：“斜接”，
“strokeMiterLimit”：10，
“scaleX”：0.8，
"斯卡利":1,，
“角度”：0，
“flipX”：错误，
“flipY”：错，
“不透明度”：1，
“影子”：“，
“可见”：真实，
“clipTo”：空，
“背景颜色”：“，
“fillRule”：“非零”，
“globalCompositeOperation”：“源代码结束”，
“转换矩阵”：空，
“skewX”：0，
“歪斜”：0，
“名称”：“标题文本”，
“锁定”：[“笔划”]，
“perPixelTargetFind”：假，
“字体大小”：165，
“fontWeight”：“800”，
“fontFamily”：“开放式SAN”，
“字体样式”：“斜体”，
“线宽”：1.16，
“文本装饰”：“，
“文本对齐”：“居中”，
“textBackgroundColor”：“，
“风格”：{
"0": {
"1": {},
"2": {},
"3": {},
"4": {},
"5": {},
"6": {},
"7": {}
}
}
});
var dateTime=new fabric.IText（'Date | Time'{
“originX”：“中心”，
“原创”：“中心”，
“左”：512，
“顶级”：206，
“宽度”：170.31，
“高度”：31.64，
“填充”：“ffffff”，
“笔划”：空，
“冲程宽度”：0，
“strokeDashArray”：空，
“strokeLineCap”：“butt”，
“strokeLineJoin”：“斜接”，
“strokeMiterLimit”：10，
“scaleX”：0.9，
"斯卡利":1,，
“角度”：0，
“flipX”：错误，
“flipY”：错，
“不透明度”：1，
“影子”：“，
“可见”：真实，
“clipTo”：空，
“背景颜色”：“，
“fillRule”：“非零”，
“globalCompositeOperation”：“源代码结束”，
“转换矩阵”：空，
“skewX”：0，
“歪斜”：0，
“名称”：“日期/时间”，
“锁定”：[“笔划”]，
“perPixelTargetFind”：假，
“字体大小”：28，
“fontWeight”：“400”，
“fontFamily”：“开放式SAN”，
“字体样式”：“斜体”，
“线宽”：1.16，
“文本装饰”：“，
“文本对齐”：“居中”，
“textBackgroundColor”：“，
“风格”：{
"0": {
"1": {},
"2": {},
"3": {},
"4": {}
}
}
});
var vsText=new fabric.IText（'vs.'{
“originX”：“中心”，
“原创”：“中心”，
“左”：512，
“顶部”：255，
“宽度”：83.6，
“高度”：56.5，
“填充”：“ffffff”，
“笔划”：空，
“冲程宽度”：0，
“strokeDashArray”：空，
“strokeLineCap”：“butt”，
“strokeLineJoin”：“斜接”，
“strokeMiterLimit”：10，
“scaleX”：0.8，
"斯卡利":1,，
“角度”：0，
“flipX”：错误，
“flipY”：错，
“不透明度”：1，
“影子”：“，
“可见”：真实，
“clipTo”：空，
“背景颜色”：“，
“fillRule”：“非零”，
“globalCompositeOperation”：“源代码结束”，
“转换矩阵”：空，
“skewX”：0，
“歪斜”：0，
“名称”：“与txt对比”，
“锁定”：[“笔划”]，
“perPixelTargetFind”：假，
“字体大小”：50，
“fontWeight”：“400”，
“fontFamily”：“RIVERHACK”，
“字体样式”：“，
“线宽”：1.16，
“文本装饰”：“，
“文本对齐”：“左”，
“textBackgroundColor”：“，
“风格”：{
"0": {
"1": {},
"2": {},
"3": {}
}
}
});
var sideText=new fabric.IText（'SIDEBAR'{
“originX”：“中心”，
“原创”：“中心”，
“左”：50，
“前30名”，
“宽度”：90.72，
“h