css for double height text and double width text i

问题:

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.

回答1:

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.

回答2:

CSS transform:scale

Check out transform scale, that should do the trick:

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 can be used to apply this CSS to each letter independently through automatic span injection as you might have an issue with layout if the whole span is text span is stretched.

Additionally, you might be able to get away with width: 50%; on your double width text to restrain it within your layout.

Create your own font

Otherwise edit the font yourself. Use a tool like Font Creator. Just manipulate the scale, and save 2 new fonts, one with 200% width, and one with 200% height. Throw them into Font Squirrel and reference all 3 as unique @font-face font-families.