网页和条形码字体
Posted
技术标签:
【中文标题】网页和条形码字体【英文标题】：Web pages and barcode fonts 【发布时间】：2010-09-19 10:47:23 【问题描述】：我正在开发一个可以生成条形码列表的小应用程序。我的电脑上安装了正确的字体。现在我将它们直接打印到网页上，它可以在 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/等的解决方案。
【问题讨论】：
如果是个人项目，为什么需要跨浏览器工作？ 跨浏览器肯定不是必需品。但是，我主要使用 Firefox，但不明白为什么这是唯一给我带来问题的浏览器。 我以前遇到过barcoderesource.com 收集的@Font Face Barcode Web Fonts。 【参考方案1】：有多种条形码格式。有些很简单，有些可能会变得非常复杂。如果适合您的应用，最容易使用的一种是 3 of 9 条码。它没有被压缩，并且与条形码中的字符存在 1 对 1 的关系。这有两种变体，仅数字和包含 alpha 的扩展集。我将继续假设您可以使用这种格式。 （从您的示例代码看来，这就是您正在使用的内容）对于最简单的实现，请仅使用数字。然后，您将只需要 11 个字符（0-9 和星号）。查看现有 3 of 9 字体的定义。 （对于非商业用途，请搜索名为 FREE3OF9 的字体。您可以将其用作应用程序的基础...）
接下来是乏味的部分 - 更多的工作可以预先为您完成，但几乎可以在任何浏览器中显示。如果您在网上找不到任何内容，请为每个字符创建一个 GIF（或 BMP 或 PNG）图像。 （请记住在字符右侧包含适当的空白，以使其与行中的下一个字符保持距离！）它只需要一个像素高。到了显示条形码的时候，将字符串在一起作为<IMG>，它们彼此相邻。 3 of 9 要求条形码中的字符在每一端都用星号包围或包裹（无论如何它是 FREE3OF9 字体中的星号）。将<IMG> 的高度设置为足够高以适合您的打印输出。
这样，客户端不需要安装字体，但大多数条码解码器都可以读取生成的图形。
您的示例 (*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" />
<img src="3o9cb_5.png" />
<img src="3o9cb_7.png" />
<img src="3o9cb_4.png" />
<img src="3o9cb_6.png" />
<img src="3o9cb_5.png" />
<img src="3o9cb_6.png" />
<img src="3o9cb_ast.png" />
</body>
</html>
我使用SearchFreeFonts.com 作为资源来刷新我对 9 个条形码字符中的 3 个如何格式化的记忆。这些图形最初来自该网站。
【讨论】：
【参考方案2】：更简单的解决方案可能是在服务器端生成图像以生成条形码。这样您就不必依赖安装字体的用户，也不必访问 html 中的字体。
【讨论】：
【参考方案3】：Mozilla 开发人员选择了不工作的符号字体。您可以在配置中启用它们，如 Getting Symbol Fonts to Work in Mozilla Firefox
中所述【讨论】：
这似乎不适用于 Firefox 3。作者没有说明它适用于哪个版本的 Firefox。【参考方案4】：在我现在工作的公司，我们使用 lesnikowski.com 的 BarCode.dll。 它生成条形码图像。这与字体是否安装在客户端电脑上并适用于所有浏览器无关。
希望这会有所帮助。
【讨论】：
【参考方案5】：自从最初提出这个问题以来，情况发生了很大变化。今天，在网络上使用条形码字体并直接渲染它已经相当简单了。
运行下面的代码 sn-p 看一个活生生的例子：
.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>【讨论】：
【参考方案6】：在网页上使用非标准字体是一件令人头疼的事情。为方便起见，您可以使用sIFR 或新的typeface.js。
编辑：这在 4 年前发布时有效，但现在不再有效。我把它留在这里留给后代，但不要把它当作正确的答案。
【讨论】：
没错，但这不是rodey遇到的问题。他说他的电脑上安装了那个字体，这个问题让他看起来好像是在他的本地机器上进行的测试。 好吧，即使是这样，我的回答可能会让其他想要一个完整的面向公众的解决方案的人受益。【参考方案7】：我们公司也有同样的问题。幸运的是，只有 1-2 人需要使用条形码字体。
我们发现，当他们收到新的 PC 时，字体无法通过任何浏览器工作。他们必须打开一个客户端应用程序（如 Word），选择一种条形码字体，然后进行一些输入以“初始化”该字体。
我认为最好的解决方案是在服务器上按需创建条形码图像。此解决方案的问题可能是清理旧图像。在我看来，与客户端解决方案相比，此解决方案需要更多的前期工作，但所带来的持续问题和维护更少。
【讨论】：
【参考方案8】：字体往往会出现问题，因为它依赖于浏览器进行渲染。图像更好。我使用Morovia Barcode Active Lite 从 IIS 创建条形码。
an example barcode http://www.morovia.com/activex/active-demo/barcode.asp?Symbology=7&ShowHRText=1&NarrowBarWidth=20&BarHeight=750&Message=0+07+70007+07723
【讨论】：
【参考方案9】：只要这样做：http://davidscotttufts.com/2009/03/31/how-to-create-barcodes-in-php/ David 创造了一种超级简单的方式来实现条形码。您将需要在 mysql 中运行的 GD 库。 （MAMP 和 LAMP 应该已经安装好了）
【讨论】：
以上是关于网页和条形码字体的主要内容，如果未能解决你的问题，请参考以下文章
在使用字体（不是图像也不是 javascript）的网页中显示 Code128
如何将 Code128 字体文本框更改为可读条形码？ [关闭]