某些字体的字符宽度计算错误，可以自动缩进

Question

我创建了一个普通的文本框并在里面输入一些“i”，我使用的字体是Lobster1.3，如你所见，我只选择了一个字符，但结果不正确 这是选择时的最后一个字符位置。看起来像Lobster1.3这样可以自动缩进的字体可能会导致某些字符宽度计算错误

Answer 1

在创建使用该字体的 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>

Answer 2

Fabric 有一种方法可以清除字体缓存，以确保在加载字体并将字体应用于文本框对象时不会得到错误的边界框测量值。

clearFabricFontCache(fontFamilyopt)

从他们的文档 http://fabricjs.com/docs/fabric.util.html

清除给定字体系列的字符宽度缓存，如果未指定 fontFamily，则清除所有缓存。如果您知道正在以惰性方式加载字体，并且在将文本对象添加到画布时不等待自定义字体正确加载，请使用它。如果在尚未加载其自己的字体时添加文本对象，您将得到错误的测量值和错误的边界框。清除字体缓存后，要么更改textObject文本内容，要么调用initDimensions()触发重新计算

所以在这种情况下你可以写：

canvas.loadFromJSON(jsonData, () => {
  //clear character cache to ensure bounding boxes for fonts are correct
  fabric.util.clearFabricFontCache();
  canvas.renderAll()
});