网页和条形码字体

问题描述 投票：7回答：9

我正在开发一个小型应用程序，可以在其中生成条形码列表。我的计算机上安装了正确的字体。现在，我将它们直接打印到网页上，并且可以在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 / etc的东西。

css xhtml fonts cross-browser barcode
9个回答
4
投票

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

8
投票

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

[接下来，这是乏味的部分-您需要做更多的工作，但几乎可以在所有浏览器中显示。如果找不到任何在线内容，则为每个字符创建一个GIF（或BMP或PNG）图像。 （请记住，在char的右侧包含适当的空白，以使其与行中的下一个char保持一定距离！）它只需要一个像素高即可。当显示条形码的时间到时，将字符串接在一起<IMG>。 9中的3要求条形码的每个字符的两端都用astrisk包围或包裹（无论如何它都是FREE3OF9字体的astrisk）。将<IMG>的高度设置得足够高以适合您的打印输出。

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

您的示例（*574656*）可能看起来像这样：“

（嗯，不完全是这样，它是一个完整的图形，而不是由多个内嵌的单个图形组成，但是您知道了）

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

* “

0 “

1 “

2 “

3 “

4 “

5 “

6 “

7 “

88

99

并且代码更改可能看起来像这样：

<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个如何格式化。这些图形最初来自该站点。

4
投票

Mozilla开发人员选择了使符号字体不起作用。您可以按照Getting Symbol Fonts to Work in Mozilla Firefox

中的说明在配置中启用它们
3
投票

[在我现在正在工作的公司中，我们使用lesnikowski.com的BarCode.dll。它生成条形码图像。它不取决于字体是否安装在客户端PC上以及是否适用于所有浏览器。

希望这会有所帮助。

2
投票

在网页上使用非标准字体是一个很大的麻烦。为了简化操作，您可以使用sIFR或新的typeface.js。

编辑：这是在4年前发布时有效的，但现在不再有效。我将其留在此处供后人参考，但请不要将其作为正确答案。

1
投票

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

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

我认为，最好的解决方案是根据需要在服务器上创建条形码图像。此解决方案的问题可能是清理旧图像。我认为，与客户端解决方案相比，此解决方案需要更多的前期工作，但可以减少正在进行的问题和维护工作，从而获得回报。

1
投票

字体往往会出现问题，因为它依赖于浏览器进行渲染。图像更好。我使用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

0
投票

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

0
投票

自最初提出此问题以来，发生了许多变化。如今，在网络上使用条形码字体并直接进行渲染非常简单。

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

.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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.