Webページとバーコードフォント
-
04-07-2019 - |
質問
私はバーコードのリストを生成できる小さなアプリに取り組んでいます。コンピュータに正しいフォントがインストールされています。現在、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などを含まない解決策が必要です。
解決
より簡単な解決策は、サーバー側で画像を生成してバーコードを生成することです。そうすれば、フォントがインストールされているユーザーに依存する必要がなく、htmlのフォントにアクセスする必要がありません。
他のヒント
いくつかのバーコード形式があります。単純なものもあれば、非常に複雑になるものもあります。アプリケーションに適合する場合、最も使いやすいのは3 of 9バーコードです。圧縮されておらず、バーコードの文字と1対1の関係があります。これには、数値のみとアルファを含む拡張セットの2つのバリエーションがあります。この形式を使用できると仮定して進めます。 (サンプルコードからは、それが使用しているように見えます)最も簡単な実装では、数値のみを使用してください。次に、必要なのは11文字(0〜9およびアスタリスク)だけです。既存の3 of 9フォントの定義を見てください。 (非営利使用の場合は、FREE3OF9というフォントを検索します。アプリのベースとして使用できます...)
次に、退屈な部分-前もってあなたのためにより多くの仕事をしますが、ほとんどすべてのブラウザで表示します。オンラインが見つからない場合は、各文字のGIF(またはBMPまたはPNG)画像を作成します。 (文字の右側に適切な空白を含めて、行内の次の文字から距離を空けることを忘れないでください!)高さは1ピクセルである必要があります。バーコードを表示するときが来たら、文字を<IMG>
のように一緒に文字列化します。 3 of 9では、バーコード内の文字が両端で囲まれているか、またはアストリスク(とにかくFREE3OF9フォントのアストリスク)でラップされている必要があります。 *574656*
の高さを、印刷に適した高さに設定します。
この方法では、クライアントにフォントをインストールする必要はありませんが、ほとんどのバーコードデコーダーは結果のグラフィックを読み取ることができます。
例(*
)は次のようになります。
(まあ、それとまったく同じではない-それはいくつかのインライン単一グラフィックスの構成ではなく、固体グラフィックスですが、あなたはアイデアを得る)
個々の数値グラフィックスは次のようになります。 (ただし、これらは<!> quot; cleaned up <!> quot;まだではありません)
0
1
2
3
4
5
6
7
8
そしてコードの変更は次のようになります:
<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つがどのようにフォーマットされたかを記憶しました。これらのグラフィックは、最初はそのサイトのものです。
Mozilla開発者は、シンボルフォントが機能しないように選択しました。 Mozilla Firefoxでのシンボルフォントの取得
現在働いている会社では、lesnikowski.comのBarCode.dllを使用しています。 バーコード画像を生成します。フォントがクライアントPCにインストールされているかどうかに依存せず、すべてのブラウザーで動作します。
これがお役に立てば幸いです。
Webページで非標準のフォントを使用することは、お尻に大きな痛みを伴います。簡単にするには、 sIFR または新しい typeface.js 。
編集:これは4年前に投稿されたときに有効でしたが、もう有効ではありません。後世のためにここに残しますが、正解とは見なしません。
私たちの会社にも同じ問題があります。幸い、バーコードフォントを使用する必要があるのは1〜2人だけです。
新しいPCを受け取ったとき、どのブラウザでもフォントが機能しないことがわかりました。クライアントアプリケーション(Wordなど)を開き、バーコードフォントを選択し、<!> quot; initialize <!> quot;に入力する必要がありました。そのフォント。
最善の解決策は、オンデマンドでサーバー上にバーコード画像を作成することだと思います。このソリューションの問題は、古いイメージのクリーンアップである可能性があります。私の意見では、このソリューションは前もってより多くの作業を必要としますが、クライアント側のソリューションよりも進行中の問題とメンテナンスが少なくて済みます。
フォントはレンダリングをブラウザに依存しているため、問題が発生する傾向があります。画像が優れています。 Morovia Barcode Active Lite を使用してIISからバーコードを作成します。
これを実行してください: http://davidscotttufts.com/2009/03/31/how-to-create-barcodes-in-php/David は、バーコードを実装する非常に簡単な方法を作成しました。MySQL で実行される GD ライブラリが必要になります。(MAMP と LAMP にはすでにインストールされているはずです)