8

バーコードのリストを生成できる小さなアプリに取り組んでいます。コンピュータに正しいフォントがインストールされています。現在、それらを Web ページに直接印刷していますが、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 を含まないものが欲しいです。

4

9 に答える 9

8

バーコードのフォーマットはいくつかあります。単純なものもあれば、非常に複雑なものもあります。アプリケーションに適合する場合、最も使いやすいのは 3 of 9 バーコードです。圧縮されておらず、バーコード内の文字と 1 対 1 の関係があります。これには、数値のみと、アルファを含む拡張セットの 2 つのバリエーションがあります。この形式を使用できるという前提で先に進みます。(サンプルコードから、それがあなたが使用しているように見えます)最も簡単な実装のために、数値のみに固執してください。そうすれば、11 文字 (0 から 9 とアスタリスク) だけが必要になります。既存の 3 of 9 フォントの定義を見てください。(非商用の場合は、FREE3OF9 というフォントを検索してください。それをアプリのベースとして使用できます...)

次に、退屈な部分です。前もってより多くの作業を行う必要がありますが、ほとんどすべてのブラウザーで表示されます。オンラインで見つからない場合は、文字ごとに GIF (または BMP または PNG) 画像を作成します。(行内の次の文字から離すために、文字の右側に適切な空白を含めることを忘れないでください!) 必要なのは 1 ピクセルの高さだけです。バーコードを表示するときが来たら、文字を のように並べて並べます<IMG>。3 of 9 では、バーコード内の文字の両端をアスタリスク (FREE3OF9 フォントのアスタリスク) で囲むかラップする必要があります。<IMG>の高さを、印刷物に合わせて十分な高さに設定します。

この方法では、クライアントにフォントをインストールする必要はありませんが、ほとんどのバーコード デコーダーは結果のグラフィックを読み取ることができます。

例 ( *574656*) は次のようになります。 574656

(正確にはそうではありません。複数のインラインの単一のグラフィックスの構成ではなく、ソリッドなグラフィックスですが、アイデアは得られます)

個々の数値グラフィックは次のようになります: (ただし、これらはまだ「クリーンアップ」されていません)

* *

0 0

1 1

2 2

3 3

4 4

5 5

6 6

7 7

8 8

9 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 つがどのようにフォーマットされたかの記憶をリフレッシュしました。これらのグラフィックは、最初はそのサイトからのものです。

于 2008-10-27T21:33:19.030 に答える
4

Mozilla 開発者は、シンボル フォントが機能しないように選択しました。Get Symbol Fonts to Work in Mozilla Firefox で説明されているように、config でそれらを有効にすることができます。

于 2008-10-27T19:00:18.447 に答える
4

より簡単な解決策は、サーバー側で画像を生成してバーコードを生成することです。そうすれば、フォントがインストールされているユーザーに依存する必要がなく、html でフォントにアクセスする必要もありません。

于 2008-10-27T20:00:01.307 に答える
3

私が現在働いている会社では、lesnikowski.comのBarCode.dllを使用しています。バーコード画像を生成します。フォントがクライアントPCにインストールされていて、すべてのブラウザで機能するかどうかには依存しません。

お役に立てれば。

于 2008-10-27T18:32:50.360 に答える
3

この質問が最初に尋ねられてから、多くの変更がありました。現在、Web 上でバーコード フォントを使用して直接レンダリングするのはかなり簡単です。

以下のコード スニペットを実行して、実際の例を確認します。

.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>

于 2020-05-17T14:04:01.593 に答える
2

Web ページで標準外のフォントを使用するのは非常に面倒です。簡単にするために、sIFRまたは新しいtypeface.jsを使用できます。

編集: これは 4 年前に投稿されたときに有効でしたが、現在は有効ではありません。後世のためにここに残しておきますが、正解とは見なさないでください。

于 2008-10-27T18:26:57.220 に答える
1

私の会社でも同じ問題があります。幸いなことに、バーコード フォントを使用する必要があるのは 1 ~ 2 人だけです。

新しい PC を受け取ったとき、どのブラウザーでもフォントが機能しないことがわかりました。クライアント アプリケーション (Word など) を開き、バーコード フォントを選択し、そのフォントを "初期化" するために入力する必要がありました。

最善の解決策は、オンデマンドでサーバー上にバーコード イメージを作成することだと思います。このソリューションの問題は、古いイメージのクリーンアップである可能性があります。私の意見では、このソリューションは前もってより多くの作業を必要としますが、クライアント側のソリューションよりも進行中の問題やメンテナンスが少なくて済みます。

于 2008-10-27T19:04:29.517 に答える
1

フォントはレンダリングをブラウザに依存しているため、問題が発生する傾向があります。イメージが良くなります。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

于 2009-01-26T00:09:16.013 に答える