css - 网页和条形码字体

Question

我正在开发一个可以生成条形码列表的小型应用程序。我的电脑上安装了正确的字体。现在我将它们直接打印到网页上，它可以在 Chrome 和 IE 7 中正常工作，但不能在 Firefox 中正常工作。有谁知道 Firefox 与 IE 和 Chrome 有什么不同？

这是我的代码：

<html>
    <head>
        <title>Barcode Font Test</title>

        <style type="text/css" media="screen">
            .barcode { font-family: "wasp 39 m", verdana, calibri; font-size: 36pt; }
        </style>
    </head>

    <body>
        <div class="barcode">*574656*</div>
    </body>
</html>

编辑： 我可能应该提到，目前这更像是一个个人项目，并不打算向全世界发布。虽然我会采用一个可行的解决方案，但我想要一些不涉及 Javascript/Flash/等的解决方案。

score 8 · Accepted Answer

有几种条形码格式。有些很简单，有些可能会变得非常复杂。如果适合您的应用，最容易使用的一种是 3 of 9 条码。它没有被压缩，并且与条形码中的字符存在 1 对 1 的关系。这有两种变体，仅数字和包含 alpha 的扩展集。我将继续假设您可以使用这种格式。（从您的示例代码看来，这就是您正在使用的内容）对于最简单的实现，请仅使用数字。然后，您将只需要 11 个字符（0-9 和星号）。查看现有 3 of 9 字体的定义。（对于非商业用途，请搜索名为 FREE3OF9 的字体。您可以将其用作应用程序的基础...）

接下来是乏味的部分 - 更多的工作为您预先准备，但几乎可以在任何浏览器中显示。如果您在网上找不到任何内容，请为每个字符创建一个 GIF（或 BMP 或 PNG）图像。（请记住在字符右侧包含适当的空白，以使其与行中的下一个字符保持距离！）它只需要一个像素高。到了显示条形码的时候，将字符串在一起作为<IMG>彼此相邻的 's。3 of 9 要求条形码中的字符在每一端都用星号包围或包裹（无论如何它是 FREE3OF9 字体中的星号）。将<IMG>'s 的高度设置为足够高以适合您的打印输出。

这样，客户端不需要安装字体，但大多数条码解码器都可以读取生成的图形。

您的示例 ( *574656*) 可能如下所示： 574656

（嗯，不完全一样——它是一个实体图形，而不是几个内联单个图形的组合，但你明白了）

单个数字图形如下所示：（尽管这些还没有“清理”）

*

0

1

2

3

4

5

6

7

8

9

并且代码更改可能如下所示：

<html>    
    <head>        
        <title>Barcode Font Test</title>        
    </head>    
    <body>   
        <img src="3o9cb_ast.png" alt="*"/>     
        <img src="3o9cb_5.png" alt="5"/>
        <img src="3o9cb_7.png" alt="7"/>
        <img src="3o9cb_4.png" alt="4"/>
        <img src="3o9cb_6.png" alt="6"/>
        <img src="3o9cb_5.png" alt="5"/>
        <img src="3o9cb_6.png" alt="6"/>
        <img src="3o9cb_ast.png" alt="*"/>
    </body>
</html>

我使用SearchFreeFonts.com作为资源来刷新我对 9 个条形码字符中的 3 个如何格式化的记忆。这些图形最初来自该站点。

score 4 · Accepted Answer

Mozilla 开发人员选择了不工作的符号字体。您可以在配置中启用它们，如让符号字体在 Mozilla Firefox 中工作中所述

score 4 · Accepted Answer

一个更简单的解决方案可能是在服务器端生成图像以生成条形码。这样您就不必依赖安装了字体的用户，也不必访问 html 中的字体。

score 3 · Accepted Answer

在我现在工作的公司，我们使用 lesnikowski.com 的 BarCode.dll。它生成条形码图像。它不依赖于字体是否安装在客户端电脑上并适用于所有浏览器。

希望这可以帮助。

score 3 · Accepted Answer

自从最初提出这个问题以来，发生了很大变化。今天，在网络上使用条形码字体并直接渲染它相当简单。

运行下面的代码片段以查看实时示例：

.barcode39 {
  font-family: 'Libre Barcode 39 Extended Text', cursive;
  font-size: 40px;
}

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

<div class="barcode39">
 *hello world*
</div>

score 2 · Accepted Answer

在网页上使用非标准字体是一件很痛苦的事情。为了更容易，您可以使用sIFR或新的typeface.js。

编辑：这在 4 年前发布时有效，但现在不再有效。我将其留给后代，但不要将其视为正确答案。

score 1 · Accepted Answer

我们公司也有同样的问题。幸运的是，只有 1-2 人需要使用条形码字体。

我们发现，当他们收到新的 PC 时，字体无法通过任何浏览器运行。他们必须打开一个客户端应用程序（如 Word），选择一种条形码字体，然后进行一些输入以“初始化”该字体。

我认为最好的解决方案是按需在服务器上创建条形码图像。此解决方案的问题可能是清理旧图像。在我看来，这个解决方案需要更多的前期工作，但与客户端解决方案相比，持续的问题和维护更少。

score 1 · Accepted Answer

字体往往会出现问题，因为它依赖于浏览器进行渲染。图像更好。我使用Morovia Barcode Active Lite从 IIS 创建条形码。

示例条码 http://www.morovia.com/activex/active-demo/barcode.asp?Symbology=7&ShowHRText=1&NarrowBarWidth=20&BarHeight=750&Message=0+07+70007+07723

score 0 · Accepted Answer

只需这样做：http ://davidscotttufts.com/2009/03/31/how-to-create-barcodes-in-php/ David 创建了一种超级简单的方式来实现条形码。您将需要在 MySQL 中运行的 GD 库。（MAMP 和 LAMP 应该已经安装了这个）

css - 网页和条形码字体

9 回答 9

Related

Reference