用于双倍高度文本的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字体系列。