texto - tamaño de letra en css

CSS para texto de doble altura y texto de doble ancho en estilo de fuente

Question

Cualquiera me puede ayudar a hacer texto de doble altura y texto de doble ancho en estilo de fuente (como en las impresoras matriciales) en css sin usar ninguna imagen.

¿Algún otro código que no sea este?

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

Lo que espero es lo siguiente.

Gracias.

Answer 1

OP,

Fiddle actualizado que incluye todos los prefijos de proveedor para transform y transform-origin : http://jsfiddle.net/LTaAy/1/

Vea este violín: 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);
}

Solo incluí 2 prefijos de proveedores, pero deben aplicarse según sea necesario. - Solo verdad arriba, este violín http://jsfiddle.net/LTaAy/1/ ha sido actualizado.

Espero eso ayude.

Answer 2

Transformación CSS: escala

Verifique la escala de transformación, eso debería hacer el truco:

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 se puede usar para aplicar este CSS a cada letra de forma independiente a través de la inyección automática de extensión, ya que puede tener un problema con el diseño si se expande todo el lapso de texto.

Además, es posible que puedas salir con el width: 50%; en su texto de doble ancho para restringirlo dentro de su diseño.

Crea tu propia fuente

De lo contrario, edite la fuente usted mismo. Use una herramienta como Font Creator . Simplemente manipule la escala y guarde 2 fuentes nuevas, una con 200% de ancho y una con 200% de alto. Tíralos a Font Squirrel y @font-face referencia a los 3 como familias de @font-face únicas.