HTML/CSS - 双倍宽度、双倍高度的等宽字体

Question

我正在尝试在HTML/CSS中模拟一个收据打印机以进行模板设计。该打印机通常是爱普生ESC/POS打印机，具有打印双倍高度、双倍宽度或两者的能力。

所有这些都需要使用等宽字体，因为打印机在正常情况下有40列，在双倍宽度或双倍宽度/高度时有20列。双倍宽度/高度不是问题，我可以在CSS中将字体大小加倍，并且两个维度都会缩放。这进一步复杂化了单独的粗体功能。

有人有建议吗？支持此功能的特定字体？ HTML/CSS是否具备复制此功能的能力？

我已经尝试过：

• font-stretch: 只适用于某些字体，只能尽可能地使用狭窄/正常。我还没有找到任何具有狭窄字形的等宽字体。
• transform:scale(): 能够工作，但是参考点是对象的中心，因此我必须获取渲染大小，然后移动它，并调整行高。我希望缩放有第三个参数来指定参考点。
• 其他各种字体：我已经搜索过了，但没有找到任何具有不同字形或可以组合的字体，比如一个足够接近标准等宽字体的双倍宽度字体。
• 自定义字体：听起来很有道理，但超出了我的能力范围。

有比transform:scale()更容易的方法吗？

编辑：

这是一张图片，使用Courier 16px，Courier 32px和scale（2,1）以及scale（1,2）完成，但我必须使用translate（27px）移动双倍宽度的文本。

创建该图片的 jsfiddle 链接: http://jsfiddle.net/ja7br/

- Paul

---

你现在使用的字体是什么？ - Mike Robinson

跨贴：http://graphicdesign.stackexchange.com/questions/20027/identify-these-fonts-used-on-receipts - Mike Robinson

Mike：目前我正在使用Courier字体。与交叉发布相比，我不关心确切的字体，但是尺寸可调性很重要。 - Paul

nzifnab：实际上，它在打印机中是作为位域实现的，因此正常状态为00，双倍高度为10，双倍宽度为01，双倍高度/宽度为11。四种不同的状态。其中两个很容易，Courier字体，16px和Courier字体，32px。而其他两个我没有一个好的解决方案。 - Paul

@Paul，您能否在HTML/CSS中模拟热敏式收据打印机的打印过程？我对此解决方案非常感兴趣。 - ankit s.

Answer 1

这是我的最终版本，它是按字符处理的，这样会产生很多HTML代码，但它有效。

既然它是等宽字体，并且每个字符都被视为单独的span/block，那么在编码时可以确定translate、width等参数，而且始终保持不变。如果它是具有可变文本长度的span/block，则需要为每个块计算宽度和水平平移。

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

- Paul

Answer 2

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

也就是说，如果需要具有特定特征的字形，您应该寻找最符合您标准的字体，而不是试图改变排版师的设计。对文本应用 transform 意味着在最好的情况下会出现扭曲，并且通常会导致渲染质量差（取决于浏览器、设备等）。

仅当所使用的字体具有拉伸或压缩字形时，font-stretch 才能发挥作用，而大多数字体都没有这种特性，即使有，它们通常也只能通过在 font-family 中声明特定字体名称来在 CSS 中使用，而不能通过 font-stretch 来使用。

- Jukka K. Korpela

Answer 3

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

例如，transform-origin: 0 0; 将告诉缩放样式从左上角开始。

查看演示：

http://jsfiddle.net/jfjfK/

- Blake Mann