用于双倍高度文本的css和用于字体样式的双倍宽度文本

Question

任何人都可以帮助我在css中使用字体样式（如点阵式打印机）中的双倍高度文本和双倍宽度文本而不使用任何图像。

除此之外的任何代码？

heading{
   font-weight:bold; 
   width:200%;
}

我的期望如下。

感谢。

Answer 1

OP，

更新了包含transform和transform-origin所有供应商前缀的小提琴：http://jsfiddle.net/LTaAy/1/

<击> 看到这个小提琴：http://jsfiddle.net/LTaAy/

IMG

HTML

  <p class="doubleWidth">DOUBLE WIDTH</p>
  <p class="doubleHeight">Double Height</p>
  <p class="doubleWidthandHeight">Double Width and Height</p>

CSS

p {
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
}
p.doubleWidth {
    -webkit-transform: scaleX(2);
    -moz-transform: scaleX(2);
}
p.doubleHeight {
    -webkit-transform: scaleY(2);
    -moz-transform: scaleY(2);
}
p.doubleWidthandHeight {
    -webkit-transform: scaleX(2) scaleY(2);
    -moz-transform: scaleX(2) scaleY(2);
}

<击> 我只包含2个供应商前缀，但应根据需要应用它们。 - 仅限上述情况，此小提琴http://jsfiddle.net/LTaAy/1/已更新。

希望它有所帮助。

Answer 2

CSS转换：缩放

检查变换比例，应该做的诀窍：

http://www.css3files.com/transform/

-webkit-transform:scale(2,1);
-moz-transform:scale(2,1);
-ms-transform:scale(2,1);
-o-transform:scale(2,1);
transform:scale(2,1);

letteringjs.com可用于通过自动跨距注入将此CSS独立应用于每个字母，因为如果整个跨度是文本跨度被拉伸，则可能存在布局问题。

此外，您可以在双倍宽度文本上使用width: 50%;，以便在布局中限制它。

创建自己的字体

否则自己编辑字体。使用Font Creator之类的工具。只需操作刻度，并保存2个新字体，一个宽度为200％，另一个宽度为200％。将它们放入Font Squirrel并将所有3引用为唯一的@font-face字体系列。