Question

我们正在使用Fabric js在画布中插入文本，我们正在插入2个文本，一个是正确加载并具有Open Sans字体的较大文本。另一个是较小的文本，这是我们遇到问题的地方，它动态地从谷歌字体库加载动态字体。它不是显示字符，而是在框中显示问号。我们尝试使用Open 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中打开以下codepen进行检查 https://codepen.io/kelvin-im/pen/xrRNEx/

我还发现在fabric js github帐户中列出了此问题 https://github.com/kangax/fabric.js/issues/4009

但开发商突然关闭了这个问题而没有支付任何意见。

修改

这是在初始化此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方法，该方法将文本预加载到画布。如果我们没有从谷歌WebFont库中获得所需的字体，我们使用的是Open Sans字体，该字体已添加到页面中。

我们正在使用2个fabric.Text类实例，一个正在加载，另一个则没有。

Answer 1

突然的开发人员，我，两次要求查看字体加载代码。在尝试在画布上使用它们之前，浏览器必须加载这些字体。

否则你会在屏幕上看到后备字体或垃圾。

现在我把codepen移到了这里，我在2秒的超时中包裹了标题。你会注意到在iphone / ipad或其他慢速设备上，那2秒应该足以让谷歌服务器首先向你提供css字符串，然后第二个请求浏览器需要获取字体文件和画布加载它，而另一个文本可以作为垃圾出现，Headeline不应该。

$(document).ready(function() {
    $('.browser-type').html(bowser.name + ' ' + bowser.version);    
  
    var canvas = new fabric.Canvas('c');
  
    $('.fabric-type').html(fabric.version);
  
    var headline = new fabric.IText('Headline', {
      "originX": "center",
      "originY": "center",
      "left": 512,
      "top": 117,
      "width": 83.6,
      "height": 56.5,
      "fill": "#ffffff",
      "stroke": null,
      "strokeWidth": 0,
      "strokeDashArray": null,
      "strokeLineCap": "butt",
      "strokeLineJoin": "miter",
      "strokeMiterLimit": 10,
      "scaleX": 0.8,
      "scaleY": 1,
      "angle": 0,
      "flipX": false,
      "flipY": false,
      "opacity": 1,
      "shadow": "",      
      "visible": true,
      "clipTo": null,
      "backgroundColor": "",
      "fillRule": "nonzero",
      "globalCompositeOperation": "source-over",
      "transformMatrix": null,
      "skewX": 0,
      "skewY": 0,
      "name": "Headline txt",
      "locked": ["stroke"],
      "perPixelTargetFind": false,
      "fontSize": 165,
      "fontWeight": "800",
      "fontFamily": "Open Sans",
      "fontStyle": "italic",
      "lineHeight": 1.16,
      "textDecoration": "",
      "textAlign": "center",
      "textBackgroundColor": "",
      "styles": {
        "0": {
          "1": {},
          "2": {},
          "3": {},
          "4": {},
          "5": {},
          "6": {},
          "7": {}
        }
      }
    });
  
    var dateTime = new fabric.IText('Date | Time', {
      "originX": "center",
      "originY": "center",
      "left": 512,
      "top": 206,
      "width": 170.31,
      "height": 31.64,
      "fill": "#ffffff",
      "stroke": null,
      "strokeWidth": 0,
      "strokeDashArray": null,
      "strokeLineCap": "butt",
      "strokeLineJoin": "miter",
      "strokeMiterLimit": 10,
      "scaleX": 0.9,
      "scaleY": 1,
      "angle": 0,
      "flipX": false,
      "flipY": false,
      "opacity": 1,
      "shadow": "",
      "visible": true,
      "clipTo": null,
      "backgroundColor": "",
      "fillRule": "nonzero",
      "globalCompositeOperation": "source-over",
      "transformMatrix": null,
      "skewX": 0,
      "skewY": 0,
      "name": "date/time",
      "locked": ["stroke"],
      "perPixelTargetFind": false,
      "fontSize": 28,
      "fontWeight": "400",
      "fontFamily": "Open Sans",
      "fontStyle": "italic",
      "lineHeight": 1.16,
      "textDecoration": "",
      "textAlign": "center",
      "textBackgroundColor": "",
      "styles": {
        "0": {
          "1": {},
          "2": {},
          "3": {},
          "4": {}
        }
      }
    });
  
    var vsText = new fabric.IText('vs.', {
      "originX": "center",
      "originY": "center",
      "left": 512,
      "top": 255,
      "width": 83.6,
      "height": 56.5,
      "fill": "#ffffff",
      "stroke": null,
      "strokeWidth": 0,
      "strokeDashArray": null,
      "strokeLineCap": "butt",
      "strokeLineJoin": "miter",
      "strokeMiterLimit": 10,
      "scaleX": 0.8,
      "scaleY": 1,
      "angle": 0,
      "flipX": false,
      "flipY": false,
      "opacity": 1,
      "shadow": "",
      "visible": true,
      "clipTo": null,
      "backgroundColor": "",
      "fillRule": "nonzero",
      "globalCompositeOperation": "source-over",
      "transformMatrix": null,
      "skewX": 0,
      "skewY": 0,
      "name": "versus txt",
      "locked": ["stroke"],
      "perPixelTargetFind": false,
      "fontSize": 50,
      "fontWeight": "400",
      "fontFamily": "RIVERHACK",
      "fontStyle": "",
      "lineHeight": 1.16,
      "textDecoration": "",
      "textAlign": "left",
      "textBackgroundColor": "",
      "styles": {
        "0": {
          "1": {},
          "2": {},
          "3": {}
        }
      }
    });
  
    var sideText = new fabric.IText('SIDEBAR', {
      "originX": "center",
      "originY": "center",
      "left": 50,
      "top": 30,
      "width": 90.72,
      "height": 36.21,
      "fill": "#0c0c0c",
      "stroke": null,
      "strokeWidth": 0,
      "strokeDashArray": null,
      "strokeLineCap": "butt",
      "strokeLineJoin": "miter",
      "strokeMiterLimit": 10,
      "scaleX": 1,
      "scaleY": 1,
      "angle": 0,
      "flipX": false,
      "flipY": false,
      "opacity": 1,
      "shadow": "",
      "visible": true,
      "clipTo": null,
      "backgroundColor": "",
      "fillRule": "nonzero",
      "globalCompositeOperation": "source-over",
      "transformMatrix": null,
      "skewX": 0,
      "skewY": 0,
      "name": "sidebar txt",
      "locked": ["stroke"],
      "perPixelTargetFind": false,
      "fontSize": 18,
      "fontWeight": "400",
      "fontFamily": "Open Sans",
      "fontStyle": "",
      "lineHeight": 0.78,
      "textDecoration": "",
      "textAlign": "center",
      "textBackgroundColor": "",
      "styles": {
        "0": {
          "1": {},
          "2": {},
          "3": {},
          "4": {},
          "5": {},
          "6": {},
          "7": {},
          "8": {}
        },
        "1": {
          "0": {},
          "1": {},
          "2": {},
          "3": {},
          "4": {}
        }
      }
    });
    
    canvas.add(sideText);
    canvas.add(dateTime);
    canvas.add(vsText);
    setTimeout(function() {
        canvas.add(headline);
    }, 2000);
});

@import 
url(https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i);

#c {
  border: 1px solid #ccc;
  background-color: #aaa;
  box-shadow: 3px 3px 3px #999;
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/bowser/1.0.0/bowser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.13/fabric.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
  <b>Browser:</b> <span class="browser-type"></span><br>
  <b>Fabric JS:</b> <span class="fabric-type"></span>
  <br><br>
  
  <div>
    <canvas id='c' width="1024" height="1024"></canvas>
  </div>  
</div>

在野生动物园：

tuple unpacking

Fabric js iPhone和iPad上的文字字符出现乱码

1 个答案: