1. Inicio
  2. Pregunta y respuesta
  3. Crear caracteres angostos con CSS

Crear caracteres angostos con CSS

2009-07-21 10 views

Respuesta

21

No puede reducir el ancho del carácter, pero puede reducir el espacio entre letras.

span { 
letter-spacing: 0px; 
}

Fuente

2009-07-21 19:31:43

+2

también toma fracciones decimales (por ejemplo, 0.2px) y negativos (por ejemplo, -1px, -0.2px), por lo que puede obtener un control bastante detallado. – Val

+2

oh, y diferentes unidades, por lo que puede ser independiente del tamaño: -1%, -0.01em - útil si el texto en cuestión varía en tamaño. – Val

+3

@ Val, no sé qué navegador estás usando, pero las fracciones decimales no parecen funcionar en Chrome 21 tres años después. – JohnK

16

Streching a font será posible con font-stretch property of CSS 3.

Fuente

2009-07-21 19:34:48 Gumbo

+1

pero no es compatible con navegadores Webkit (Google Chrome, Apple Safari, ...) –

+19

@PrimozRome Es por eso que usé el tiempo futuro. – Gumbo

+4

Aún no es compatible, pasaron 6 años desde la respuesta. Gracias por la respuesta de todos modos. :) –

24

Use fuentes angostas en su declaración de familia de fuentes. Estos son bastante comunes.

font-family: "Helvetica Narrow","Arial Narrow",Tahoma,Arial,Helvetica,sans-serif;

Fuente

2011-02-16 21:22:03

1

puede utilizar font-weight: en el código CSS para este

Fuente

2015-12-10 14:05:14 Zero

+0

FYI - Esto solo funciona con algunas fuentes –

7

Sólo puede ajustar la escala del texto. Por ejemplo:

.my-text { 
    transform: scaleX(0.5); 
}

pero cuidado con transform-origin que puede hacer que el texto se mueve en otro lugar (por ejemplo, si se cambia la escala con un origen en su centro).

Fuente

2016-10-19 07:01:03 Javarome

+0

Utilicé 'transform' en FireFox 54 para el texto en un elemento' SELECT'. Escalo correctamente el texto dentro de mi elemento 'SELECT' y dibujó el elemento' SELECT' correctamente, pero no pudo ajustar el espaciado entre los objetos. El elemento 'SELECT' toma el mismo espacio, aunque es considerablemente más pequeño horizontalmente. – JBH

Cuestiones relacionadas

 Cuestiones relacionadas