更新的 Libre Barcode 128 google 字体未加载到画布中答案

【问题标题】：Updated Libre Barcode 128 google font doesn't load in to canvas更新的 Libre Barcode 128 google 字体未加载到画布中
【发布时间】：2018-03-06 07:22:42
【问题描述】：

我必须将 Libre Barcode 128 字体系列加载到织物画布中。但条形码不在画布上查看。如何在fabric js canvas中设置Libre Barcode 128字体系列？

var text;
var canvas;
document.addEventListener("DOMContentLoaded", function() {
  canvas = new fabric.Canvas('c');
  setTimeout(function() {
    text = new fabric.Text("Text", {
      fontSize: 70,
      left: 100,
      top: 0,
      fill: '#sew3435'
    });
    canvas.add(text).setActiveObject(text);
    canvas.getActiveObject().set("fontFamily", 'Libre Barcode 128');
    canvas.renderAll();
  }, 1000)
});

<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Libre+Barcode+39+Text" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.js"></script>
    <script src="html2canvas.js"></script>
    <style>
      .ss {
        font-family: 'Libre Barcode 39 Text';
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <div class="ss">Making the Web Beautiful!</div>
    <canvas id="c" width=500 height=250></canvas>
  </body>
</html>

【问题讨论】：

您能否分享您已有的任何代码，以便我们看到您卡在哪里。
查看我更新的代码@JensS

标签： html5-canvas fabricjs

【解决方案1】：

实际字体是 3-of-9 字体，而不是 128（尽管它们的处理方式相同），并且名称应该是（在 CSS 中定义）：

.set("fontFamily", "'Libre Barcode 39 Text'");

您可能必须在 DOM 元素上“预先使用”字体，然后它才会被画布拾取。

更新：似乎 FabricJS 按原样使用传入的字符串，因此由于字体系列名称中的空格（为了完整起见，此处包含），因此必须在此处添加内引号。

Fiddle example

【讨论】：

请参考这个小提琴，jsfiddle.net/Kz7VL/39 我在 Fabric js 中使用了 Libre Barcode 39 Text 字体系列，但它不起作用@K3N
@NandhiKumar 啊，是的，似乎 FabricJS 不会在内部为带有空格的名称应用引号。为完整性添加了这一点。

【解决方案2】：

var text;
  var canvas;
  document.addEventListener("DOMContentLoaded", function() {
  canvas = new fabric.Canvas('c');
  setTimeout(function() {
  text = new fabric.Text("Text", {
  fontSize: 70,
  left: 100,
  top: 0,
  fill: '#f00'
  });
  canvas.add(text).setActiveObject(text);
  canvas.getActiveObject().set("fontFamily", "'Libre Barcode 39 Text'");
  canvas.renderAll();
  }, 500)
  });

<html>
  <head>
<link href="https://fonts.googleapis.com/css?family=Libre+Barcode+39+Text" 
rel="stylesheet">
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.js"></script>
</head>
<body>

<canvas id="c" width=500 height=250></canvas>
</body>
</html>

我们必须用单引号设置字体系列名称，例如“'Libre Barcode 39 Text'”，最后它对我有用。

【讨论】：