3

レシートのテンプレートを作成するために、HTML/CSS でレシート プリンターをエミュレートしようとしています。プリンター、典型的な Epson ESC/POS プリンターは、2 倍の高さ、2 倍の幅、またはその両方を印刷する機能を備えています。

プリンターには標準で 40 列、倍幅または倍幅/高さで 20 列があるため、これはすべてモノスペース フォントである必要があります。Double-wide/tall は問題ではありません。CSS でフォ​​ントのサイズを 2 倍にするだけで、両方の寸法がスケーリングされます。これは、別の太字関数によってさらに複雑になります。

誰にも提案はありますか？これをサポートする特定のフォントは? これを複製する HTML/CSS 機能はありますか?

私が試してみました：

  • font-stretch: - 特定のフォントでのみ動作します。幅の狭い書体のモノスペース フォントは見つかりませんでした。
  • transform:scale(): 動作しますが、オブジェクトの中心を参照しているため、レンダリングされたサイズを取得してからシフトし、行の高さを調整する必要があります。scale に基準点を指定する 3 番目のパラメーターがあればいいのにと思います。
  • 他のさまざまなフォント: 標準のモノスペース フォントに十分近い倍幅フォントのように、さまざまな書体を持っているか、組み合わせることができるフォントを探しましたが、見つかりませんでした。
  • カスタム フォント: もっともらしく聞こえますが、私が取りたいと思う以上のものです。

より簡単ですtransform:scale()か？

編集：

これは、courier 16px、courier 32px、scale(2,1)、および scale(1,2) で作成された画像ですが、translate(27px) で 2 倍幅のテキストを移動する必要がありました。

概算の ESC/POS フォント

イメージを作成した jsfiddle: http://jsfiddle.net/ja7br/

4

3 に答える 3

1

適切な方法は、必要に応じてフォントを探して見つけることです@font-face。ただし、フォント サイズを大きくしただけの「横 2 倍、縦 2 倍」は除きます。

つまり、特定の特性を持つグリフが必要な場合は、タイポグラファーのデザインを変形しようとするのではなく、基準に最も一致するフォントを探す必要があります。テキストに適用するtransformと、せいぜい歪みを意味し、多くの場合、レンダリングが不十分になります (ブラウザー、デバイスなどによって異なります)。

を使用font-stretchすると、使用されているフォントが引き伸ばされた、または圧縮された書体を持っている場合にのみ機能し、ほとんどのフォントはそうではありませfont-familyんfont-stretch。

于 2013-10-22T06:23:15.953 に答える
1

を使用することに満足しているtransform: scale();が、単に変換ポイントを制御できるようにしたい場合は、問題を で解決する必要がありますtransform-origin。

たとえばtransform-origin: 0 0;、スケール スタイルが左上隅から始まるように指示します。

デモを見る:

http://jsfiddle.net/jfjfK/

于 2013-10-22T02:14:06.223 に答える