Question

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

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

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

我试过了：

font-stretch： - 仅适用于某些字体，只有我能说的最差/正常。我还没有找到任何带有窄字体的等宽字体。
transform:scale()：有效，但是以对象的中心为参考，因此我必须获得渲染的大小，然后移动它，并调整行高。我确定希望scale有第三个参数来指定参考点。
各种其他字体：我看过，但没找到任何字体，或者我可以组合，就像双宽字体，足够接近标准的等宽字体。
自定义字体：听起来似乎有道理，但比我想要的更多。

比transform:scale()更容易吗？

修改

这是一张图片，用快递16px，快递32px和比例（2,1）以及比例（1,2）完成，但我不得不用翻译（27px）移动双宽文本。

Approximate ESC/POS fonts

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

Answer 1

这是我最终得到的，它是每个角色，这使得很多HTML，但它的工作原理。

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

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);*/
}

Answer 2

如果您对使用transform: scale();感到满意，但希望能够控制转换点，那么您的问题应该通过transform-origin来解决。

例如，transform-origin: 0 0;会告诉缩放样式来自左上角。

参见演示：

http://jsfiddle.net/jfjfK/

Answer 3

适当的方法是尝试找到适合您需求的字体，可能与@font-face一起使用。除了“双宽，双高”，这只是增加了字体大小。

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

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

HTML / CSS - 双宽，双高等宽字体

3 个答案: