i create a normal textbox and type some "i"s inside,the font i use is Lobster1.3,as you can see,i just selection one character,but the result is not correctly
and this is the last character position while in selection.
it looks that some font like Lobster1.3 which can make auto indent can make some character width calculation wrong
在创建使用该字体的 FabricObject 之前，您必须确保该字体已正确加载到画布上，否则，fabricjs 会创建一个字符宽度缓存，您必须手动删除该缓存才能获得好的字体。
var jsondata = {
"objects": [{
"type": "textbox",
"originX": "left",
"originY": "top",
"left": 50,
"top": 50,
"fill": "rgb(0,0,0)",
"stroke": null,
"strokeWidth": 0,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 1.7870722433460076,
"scaleY": 1.7870722433460076,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"transformMatrix": null,
"skewX": 0,
"skewY": 0,
"stretchMode": "any",
"lockScalingX": false,
"lockUniScaling": false,
"lockScalingY": true,
"text": "iiiiiiiii",
"fontSize": "42",
"fontWeight": "normal",
"fontFamily": "Lobster",
"fontStyle": "",
"textDecoration": "",
"textAlign": "left",
"letterSpacing": 20,
"lineHeight": 1.16,
"textBackgroundColor": "",
"charSpacing": 20,
"styles": {
"0": {
"0": {
"fill": "#000",
"stroke": "#000",
"fontFamily": "Lobster"
},
"1": {
"fill": "#000",
"stroke": "#000",
"fontFamily": "Lobster"
},
"2": {
"fill": "#000",
"stroke": "#000",
"fontFamily": "Lobster"
},
"3": {
"fill": "#000",
"stroke": "#000",
"fontFamily": "Lobster"
},
"4": {
"fill": "#000",
"stroke": "#000",
"fontFamily": "Lobster"
},
"5": {
"fill": "#000",
"stroke": "#000",
"fontFamily": "Lobster"
},
"6": {
"fill": "#000",
"stroke": "#000",
"fontFamily": "Lobster"
},
"7": {
"fill": "#000",
"stroke": "#000",
"fontFamily": "Lobster"
},
"8": {
"fill": "#000",
"stroke": "#000",
"fontFamily": "Lobster"
}
}
},
"minWidth": 20,
"lastCachedStyleObject": {
"fill": "#000",
"stroke": "#000",
"fontFamily": "Lobster"
}
}],
"backgroundData": "#ffffff",
"width": 1023,
"height": 637
}
var canvas = new fabric.Canvas("myCanvas");
canvas.controlsAboveOverlay = true;
canvas.backgroundColor = '#FFFFFF';
WebFont.load({
google: {
families: ['Lobster']
},
active: function() {
canvas.loadFromJSON(jsondata, canvas.renderAll.bind(canvas));
}
}); <script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<canvas id='myCanvas' width='800' height='600'></canvas>