网页和条形码字体
Rya*_*yer 7 css xhtml fonts cross-browser barcode
我正在开发一个小应用程序,我可以生成一个条形码列表.我的计算机上安装了正确的字体.现在我将它们直接打印到网页上,它可以在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 /等的东西.
有几种条形码格式.有些很简单,有些可能变得非常复杂.如果它适合您的应用,最容易使用的是9条码中的3条.它没有被压缩,并且条形码中的字符与1到1的关系.这有两种变体,仅限数字和包含alpha的扩展集.我会继续假设你可以使用这种格式.(从您的示例代码看,它看起来就像您正在使用的那样)对于最简单的实现,只使用数字.然后,你只需要11个字符(0-9和星号).查看现有的9 of 9字体的定义.(对于非商业用途,搜索名为FREE3OF9的字体.您可以将其用作应用程序的基础...)
接下来,繁琐的部分 - 预先为您提供更多的工作,但几乎可以在任何浏览器中显示.如果您在网上找不到任何内容,请为每个字符创建一个GIF(或BMP或PNG)图像.(记住在char的右侧包含适当的空白区域,使其与下一个char排成一行!)它只需要一个像素高.当显示条形码的时候,将字符串在一起作为<IMG>彼此相邻的字符串.第3页,共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" 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个被格式化的记忆.这些图形最初来自该网站.