HTML/CSS - 双宽、双高等宽字体答案

【问题标题】：HTML/CSS - Double-wide, double-tall monospace fontHTML/CSS - 双宽、双高等宽字体
【发布时间】：2013-10-24 01:25:34
【问题描述】：

我正在尝试在 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) 移动双宽文本。

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

【问题讨论】：

你现在用什么字体？
跨帖：graphicdesign.stackexchange.com/questions/20027/…
双高双宽是什么意思？请显示一个示例（至少带有一个 URL）。解释“双宽/高不是问题”部分，因为它似乎与标题相矛盾。
是的，我很困惑。你说“双宽/高不是问题”，但不要继续解释问题是什么。那么......这里的问题是什么？如果您想将字体大小加倍，只需将父元素的字体设置为特定大小，然后使用“font-size: 2em;”在收据元素上加倍。
@Paul 您是否能够在 HTML/CSS 中模拟收据打印机以进行热收据打印机。我对此的解决方案非常感兴趣。

标签： html css fonts

【解决方案1】：

这是我最终得到的，它是每个字符的，这会产生很多 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);*/
}

【讨论】：

【解决方案2】：

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

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

查看演示：

http://jsfiddle.net/jfjfK/

【讨论】：

【解决方案3】：

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

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

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

【讨论】：