【发布时间】：2017-12-14 02:53:48
【问题描述】：
我们正在使用 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
但开发者在没有向 cmets 支付任何隐藏信息的情况下突然关闭了问题。
编辑
这是初始化这个 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 Library 中获得所需的字体，我们使用的是 Open Sans 字体，该字体已添加到页面中。
我们使用了 fabric.Text 类的 2 个实例，一个正在加载，另一个没有。
【问题讨论】：
标签： ios css iphone ipad fabricjs