3

我正在尝试在 HTML/CSS 中模拟收据打印机来模板化收据。该打印机是典型的 Epson ESC/POS 打印机，能够打印双高、双宽或两者。

这一切都需要是等宽字体，因为打印机正常有 40 列，双宽或双宽/高有 20 列。双宽/高不是问题，我可以将 CSS 中的字体大小加倍，并且两个尺寸都可以缩放。单独的粗体功能使这进一步复杂化。

有人有建议吗？支持此功能的特定字体？HTML/CSS 能力来复制这个？

我试过了：

  • font-stretch: - 仅适用于某些字体，据我所知，仅适用于窄/正常。我还没有找到任何窄字体的等宽字体。
  • transform:scale(): 有效，但被引用到对象的中心，所以我必须得到渲染的大小，然后移动它，并调整行高。我当然希望 scale 有第三个参数来指定参考点。
  • 其他各种字体：我看过，但没有找到任何字体，或者有各种字体，或者我可以组合，比如足够接近标准等宽字体的双宽字体。
  • 自定义字体：听起来很合理，但比我想接受的要多。

有什么比 更容易的transform:scale()吗？

编辑：

这是一张图片，用 courier 16px、courier 32px 和 scale(2,1) 和 scale(1,2) 完成，但我必须用 translate(27px) 移动双宽文本。

近似 ESC/POS 字体

创建图像的 jsfiddle：http: //jsfiddle.net/ja7br/

4

3 回答 3

4

这是我最终得到的，它是每个字符的，这会产生很多 html，但它确实有效。

由于它是等宽字体，并且每个字符都被视为单独的跨度/块，因此可以在代码时确定翻译、宽度等，并且它始终是恒定的。如果它是具有可变文本长度的跨度/块，则必须为每个块计算宽度和水平平移。

span.PrintTypeID
{
    font-family:courier;
    font-size:16px;
    display:inline-block;    
}    
span.PrintTypeID_wt00
{
    /* Not needed: transform:scale(1.0,1.0);*/    
}
span.PrintTypeID_wt10
{
    /*double width, normal height*/
    transform:scale(2.0,1.0);
    transform-origin: left bottom;
    /* Alternatively, before Blake pointed out transform-origin,
        transform:scale(2.0,1.0) translate(6px); */
    width:20px;
}
span.PrintTypeID_wt01
{
    /*normal width, double height*/
    transform:scale(1.0,2.0) translate(0px,-2px);
    transform-origin: left center;
    line-height:34px;
}
span.PrintTypeID_wt11
{
    /*double width, double height*/
    font-size:34px;
    /* Not needed: transform:scale(2.0,2.0);*/
}
于 2013-10-23T17:25:34.873 回答
1

如果您满足于使用transform: scale();但只是希望能够控制转换点，那么您的问题应该通过transform-origin.

例如，transform-origin: 0 0;将告诉缩放样式起源于左上角。

见演示：

http://jsfiddle.net/jfjfK/

于 2013-10-22T02:14:06.223 回答
1

适当的方法是尝试找到适合您需要的字体，可能会将其与@font-face. 除了“双宽双高”，只是增加了字体大小。

也就是说，如果您需要具有某些特征的字形，您应该寻找最符合您的标准的字体，而不是试图改变印刷师的设计。应用于transform文本最多意味着失真，并且通常会导致渲染效果不佳（取决于浏览器、设备等）。

Usingfont-stretch仅在使用的字体具有拉伸或压缩字体时才有效，并且大多数字体没有，如果它们这样做，它们通常只能通过在 中声明特定字体名称而font-family不是 via来在 CSS 中使用font-stretch。

于 2013-10-22T06:23:15.953 回答