CSS 网页和条形码字体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/240948/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Web pages and barcode fonts
提问by Ryan Rodemoyer
I'm working on a small app where I can generate a list of barcodes. I have the correct fonts installed on my computer. Right now I am printing them directly to a webpage and it works properly in Chrome and IE 7, but not Firefox. Does anyone know what Firefox would be doing differently than IE and Chrome?
我正在开发一个可以生成条形码列表的小应用程序。我的电脑上安装了正确的字体。现在我将它们直接打印到网页上，它在 Chrome 和 IE 7 中正常工作，但在 Firefox 中不能正常工作。有谁知道 Firefox 与 IE 和 Chrome 有何不同？
Here is my code:
这是我的代码：
<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>
EDIT:I probably should have mentioned that this is more of a personal project at the moment and not meant to be released to the world. While I will take a solution that works, I would like something that does not involve Javascript/Flash/etc.
编辑：我可能应该提到，目前这更像是一个个人项目，并不打算向全世界发布。虽然我会采用一个有效的解决方案，但我想要一些不涉及 Javascript/Flash/等的东西。
采纳答案by Rune Grimstad
A simpler solution might be to generate images server side to generate the bar codes. That way you don't have to rely on the user having a font installed and you don't have to access the font in your html.
更简单的解决方案可能是在服务器端生成图像以生成条形码。这样您就不必依赖安装了字体的用户，也不必访问 html 中的字体。
回答by Doug L.
There are several barcode formats. Some are simple and some can get very complex. One of the easiest to use, if it fits your application, is the 3 of 9 barcode. It is not compressed and there is a 1 to 1 relation to the chars in the barcode. There are two variants of this, numeric only and the extended set that includes alpha. I'll go forward with the asumption that you can use this format. (From your sample code, it looks like that's what you are using) For the easiest implementation, stick with the numeric only. Then, you will only require eleven chars (0-9 and the astrisk). Look at the definition of an existing 3 of 9 font. (For non-commercial use, search for a font called FREE3OF9. You can use that as the base for your app...)
有多种条形码格式。有些很简单，有些可能变得非常复杂。如果适合您的应用程序，最容易使用的一种是 3 of 9 条码。它没有被压缩，并且与条形码中的字符是 1 对 1 的关系。这有两种变体，仅数字和包含 alpha 的扩展集。我将继续假设您可以使用这种格式。（从您的示例代码看来，这就是您正在使用的）对于最简单的实现，只使用数字。然后，您将只需要 11 个字符（0-9 和星号）。查看现有 3 of 9 字体的定义。（对于非商业用途，请搜索名为 FREE3OF9 的字体。您可以将其用作应用程序的基础...）
Next, the tedious part - more work for you up front but displays in almost any browser. If you can't find any on-line, crerate a GIF (or BMP or PNG) image for each char. (Remeber to include the proper white-space on the right side of the char to distance it from the next char in line!) It only needs to be one pixel high. When the time comes to display the barcode, string the chars together as <IMG>'s that are next to each other. 3 of 9 requires that the chars in the barcode are surrounded or wrapped with an astrisk (it's the astrisk in the FREE3OF9 font anyway) on each end. Set the height of the <IMG>'s to something tall enough to suit your printout.
接下来是乏味的部分 - 预先为您做更多工作，但几乎可以在任何浏览器中显示。如果您在网上找不到任何内容，请为每个字符创建一个 GIF（或 BMP 或 PNG）图像。（请记住在字符的右侧包含适当的空白以使其与行中的下一个字符保持距离！）它只需要一个像素高。当需要显示条码时，将字符串在一起作为<IMG>彼此相邻的 's。3 of 9 要求条码中的字符在每一端都用星号包围或包裹（无论如何它是 FREE3OF9 字体中的星号）。将<IMG>'s的高度设置为足够高以适合您的打印输出。
This way, no font installation required at the client, but most barcode decoders can read the resulting graphic.
这样，客户端无需安装字体，但大多数条码解码器都可以读取生成的图形。
Your example (*574656*) might look like this:
您的示例 ( *574656*) 可能如下所示：
(well, not exactly like that - it's a solid graphic instead of a composition of several in-line single graphics, but you get the idea)
（嗯，不完全是这样 - 它是一个实体图形，而不是几个内嵌的单个图形的组合，但你明白了）
The individual numeric graphics look like this: (although, these are not "cleaned up" yet)
单独的数字图形看起来像这样：（虽然，这些还没有“清理”过）
*
*
0
0
1
1
2
2
3
3
4
4
5
5
6
6
7
7
8
8
9
9
and the code changes might look like this:
代码更改可能如下所示：
<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>
I used SearchFreeFonts.comas a resource to refresh my memory of how 3 of 9 barcode chars were formatted. These graphics are initially from that site.
我使用SearchFreeFonts.com作为资源来刷新我对 9 个条码字符中的 3 个如何格式化的记忆。这些图形最初来自该站点。
回答by Greg
The Mozilla developers made a choice for symbol fonts to not work. You can enable them in the config as described in Getting Symbol Fonts to Work in Mozilla Firefox
Mozilla 开发人员选择了符号字体不起作用。您可以按照让符号字体在 Mozilla Firefox 中工作中所述在配置中启用它们
回答by Norbert B.
At the company i'm working at now we use BarCode.dll of lesnikowski.com. It generates barcode images. It doesn't depend whether or not the font is installed on the client pc and works with all browser.
在我现在工作的公司，我们使用 lesnikowski.com 的 BarCode.dll。它生成条形码图像。它不依赖于字体是否安装在客户端 PC 上并适用于所有浏览器。
Hope this helps.
希望这可以帮助。
回答by eyelidlessness
Using non-standard fonts on web pages is a big pain in the ass. To make it easier you can use sIFRor the new typeface.js.
在网页上使用非标准字体是一件非常痛苦的事情。为了更容易，您可以使用sIFR或新的typeface.js。
Edit: This was valid 4 years ago when it was posted, but isn't anymore. I'll leave it here for posterity, but don't take it as a correct answer.
编辑：这在 4 年前发布时有效，但不再有效。我会把它留在这里给后代，但不要把它当作正确的答案。
回答by Chad Braun-Duin
We have the same problem at my company. Luckily, only 1-2 people ever need to use the barcode fonts.
我们公司也有同样的问题。幸运的是，只有 1-2 人需要使用条码字体。
We have found that when they received new a PC, the fonts didn't work through any browsers. They had to open up a client application (like Word), choose a barcode font, and do some typing to "initialize" that font.
我们发现，当他们收到新的 PC 时，字体在任何浏览器中都无法使用。他们必须打开一个客户端应用程序（如 Word），选择一种条形码字体，然后进行一些输入以“初始化”该字体。
The best solution, I think, is to create a barcode image on the server on demand. The problem with this solution could be cleaning up old images. This solution requires more work up-front but pays off with less on-going issues and maintenance than the client side solution, in my opinion.
我认为最好的解决方案是按需在服务器上创建条形码图像。此解决方案的问题可能是清理旧图像。在我看来，此解决方案需要更多的前期工作，但与客户端解决方案相比，其持续的问题和维护更少。
回答by Chad Braun-Duin
Fonts tend to have problems because it relies on the browser to do the rendering. Image is better. I use Morovia Barcode Active Liteto create barcodes from IIS.
字体往往有问题，因为它依赖于浏览器来进行渲染。图像更好。我使用Morovia Barcode Active Lite从 IIS 创建条码。
回答by Richard Osenga
Just do this: http://davidscotttufts.com/2009/03/31/how-to-create-barcodes-in-php/David created a super-simple way to implement bar codes. You will need the GD library running in MySQL. (MAMP & LAMP should already have this installed)
只需这样做：http: //davidscotttufts.com/2009/03/31/how-to-create-barcodes-in-php/David 创建了一种实现条形码的超级简单方法。您将需要在 MySQL 中运行的 GD 库。（MAMP 和 LAMP 应该已经安装了这个）
回答by broc.seib
Much has changed since this question was originally asked. Today, it is fairly simple to use a barcode font on the web and render it directly.
自从最初提出这个问题以来，已经发生了很大变化。今天，在网络上使用条形码字体并直接渲染它是相当简单的。
Run the code snippet below to see a live example:
运行下面的代码片段以查看实时示例：
.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>