Add Barcode into html-CodePudding

It does not work:

<div style="font-family:LBC39W95">
  358853358
</div>

or:

<font face="LBC39W95">358853358</font>

How to set correctly To reach the result in the picture?

**I tried with ***

CodePudding user response：

there is some library that can do it in canvas or svg JsBarcode https://github.com/lindell/JsBarcode

JsBarcode("#barcode", "358853358");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.5/JsBarcode.all.min.js" integrity="sha512-QEAheCz x/VkKtxeGoDq6nsGyzTx/0LMINTgQjqZ0h3 NjP bCsPYz3hn0HnBkGmkIFSr7QcEZT KyEM7lbLPQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<canvas id="barcode"></canvas>

CodePudding user response：

You need to import your barcode font correctly prior to using it. For instance, using Google Font's "Libre Barcode 39 Extended Text" :

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Libre Barcode 39 Extended Text&display=swap" rel="stylesheet">

<span style="font-family: 'Libre Barcode 39 Extended Text'; font-size: 55px;">358853358</span>

Coincidentally, your barcode sample seems to be a valid UPC-12 / EAN-13 barcode with trimmed leading 0s. So you may also be able to write it so:

.upc-barcode,
.ean-barcode {
  font-family: 'Libre Barcode EAN13 Text';
  font-size: 128px;
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Libre Barcode EAN13 Text&display=swap" rel="stylesheet">

<div>
<strong>UPC-12:</strong>
<span >000358853358</span>
</div>

<div>
<strong>EAN-13:</strong>
<span >0000358853358</span>
</div>