更新的免費條碼128谷歌字體不會加載到畫布

-1

我必須將Libre Barcode 128字體系列加載到織物畫布。但條碼不能在畫布上查看。如何在布料js畫布中設置Libre Barcode 128字體系列？更新的免費條碼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>

來源

2017-09-25 Nandhi Kumar

您可以分享您已有的任何代碼，以便我們可以看到您卡住的位置。 – JensS

看到我更新的代碼@JensS –

實際字體是3-的-9的字體，而不是128（儘管它們被以相同方式處理）和名稱應該是（如在CSS中定義）：

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

您可能需要一個DOM元素之前，這將是由帆布拿起「preuse」的字體。

更新：好像FabricJS原樣使用傳入的字符串，因此必須添加內部引號，這是由於字體系列名稱中的空格（此處包含爲了完整性）。

Fiddle example

來源

2017-09-26 06:41:42 K3N

請參考這個小提琴， http://jsfiddle.net/Kz7VL/39/ 我用自由報條形碼39文本字體家族在面料JS，但其沒有工作@ K3N –

@NandhiKumar嗯，好像FabricJS不會在內部使用帶有空格的名稱的引號。爲了完整性增加了這一點。 – K3N

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>

我們在單引號像「 '自由報條碼39文字'」與設置字體系列名稱，最後，它爲我工作。

來源

2017-09-26 09:05:17

更新的免費條碼128谷歌字體不會加載到畫布

回答

相關問題