css - 字体样式中双高文本和双宽文本的 css

Question

任何人都可以帮助我在不使用任何图像的情况下在 css 中以字体样式（就像在点阵打印机中一样）做双高文本和双宽文本。

除此以外的任何代码？

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

我的期望如下。

谢谢。

Answer 1

操作，

更新的小提琴，包括所有供应商前缀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字体系列。