用于字体样式中双高文本和双宽文本的 css [英] css for double height text and double width text in font style

问题描述

任何人都可以帮助我在不使用任何图像的情况下在 css 中以字体样式(如点阵打印机)制作双高文本和双宽文本.

除此之外还有其他代码吗?

标题{字体粗细:粗体；宽度:200%；}

我的期望如下.

谢谢.

解决方案

OP,

更新的小提琴，包括 transform 和 transform-origin 的所有供应商前缀: 已更新.

希望有帮助.

Any one can help me to do double height text and double width text in font style(as like in dot matrix printers) in css without using any images.

Any code other than this?

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

What I expect is as below.

Thanks.

解决方案

OP,

Updated fiddle that includes all vendor prefixes for transform and transform-origin:http://jsfiddle.net/LTaAy/1/

See this fiddle: 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);
}

I only included 2 vendors prefixes, but they should be applied as necessary. - Only true above, This fiddle http://jsfiddle.net/LTaAy/1/ has been updated.

Hope it helps.

这篇关于用于字体样式中双高文本和双宽文本的 css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！