font - Css, ¿Puedo estirar texto?

estirar texto verticalmente css

Question

¿Puedo estirar texto en CSS? No quiero que la fuente sea más grande, porque eso hace que parezca más audaz que el texto más pequeño al lado. Solo quiero estirar el texto verticalmente para que esté algo deformado. Esto sería en un div, y luego el texto normal al lado estaría en otro div. ¿Cómo puedo hacer esto?

Answer 1

CSS font-stretch now supported in all major browsers (except iOS Safari and Opera Mini) es now supported in all major browsers (except iOS Safari and Opera Mini) . No es fácil encontrar una familia de fuentes común que admita la expansión de fuentes, pero es fácil encontrar fuentes que admitan la condensación, por ejemplo:

font-stretch: condense;
font-family: sans-serif, "Helvetica Neue", "Lucida Grande", Arial;

Answer 2

Sí, puedes hacerlo con CSS 2D Transforms. Esto es compatible con casi todos los navegadores modernos, incluido IE9 +. Aquí hay un ejemplo.

HTML

<p>I feel like <span class="stretch">stretching</span>.</p>

CSS

span.stretch {
    display:inline-block;
    -webkit-transform:scale(2,1); /* Safari and Chrome */
    -moz-transform:scale(2,1); /* Firefox */
    -ms-transform:scale(2,1); /* IE 9 */
    -o-transform:scale(2,1); /* Opera */
    transform:scale(2,1); /* W3C */
}

SUGERENCIA: Es posible que necesite agregar un margen a su texto extendido para evitar colisiones de texto.

Answer 3

Técnicamente, no. Pero lo que puede hacer es usar un tamaño de letra que sea tan alto como le gustaría que sea la fuente estirada, y luego condensarlo horizontalmente con font-stretch .

Answer 4

Voy a responder por el estiramiento horizontal del texto, ya que la vertical es la parte fácil, simplemente use "transform: scaleY ()"

.stretched-text {
  letter-spacing: 2px;
  display: inline-block;
  font-size: 32px;
  transform: scaleY(0.5);
  transform-origin: 0 0;
  margin-bottom: -50%;
}
span {
  font-size: 16px;
  vertical-align: top;
}

<span class="stretched-text">this is some stretched text</span>
<span>and this is some random<br />triple line <br />not stretched text</span>

el espacio entre letras simplemente agrega espacio entre letras, no estira nada, pero es relativamente relativo

bloque en línea porque los elementos en línea son demasiado restrictivos y el código siguiente no funcionaría

Ahora la combinación que hace la diferencia

tamaño de fuente para obtener el tamaño que queremos, de esa manera el texto será realmente de la longitud que se supone que debe ser y el texto antes y después aparecerá junto a él (scaleX es solo para mostrar, el navegador aún ve el elemento en su tamaño original al posicionar otros elementos).

scaleY para reducir la altura del texto, de modo que coincida con el texto al lado.

origen de transformación para hacer que la escala de texto se encuentre en la parte superior de la línea.

margin-bottom establecido en un valor negativo, de modo que la próxima línea no estará muy por debajo, preferiblemente porcentual, por lo que no cambiaremos la propiedad de altura de línea. vertical-alinear establecido en la parte superior, para evitar que el texto anterior o posterior floten a otras alturas (ya que el texto extendido tiene un tamaño real de 32 píxeles)

- El elemento simple span tiene un tamaño de letra, solo como referencia.

La pregunta era sobre la forma de evitar la audacia del texto causada por el estiramiento y todavía no he dado uno, PERO la propiedad font-weight tiene más valores que los normales y audaces .

Lo sé, no puedes ver eso, pero si buscas las fonts adecuadas, puedes usar más valores.