Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.
CSS: propiedades de espaciado entre letras
Este tutorial de CSS explica cómo usar una propiedad de CSS llamada espaciado de letras Con sintaxis y ejemplos.
describir
La propiedad de espaciado entre letras de CSS define el espacio entre los caracteres de texto.
sintaxis
La sintaxis de la propiedad CSS de espaciado entre letras es:
letter-spacing: value;parámetro o parámetro
valor
La cantidad de espacio adicional para mostrar entre caracteres de texto (además del espaciado estándar de la fuente). Puede ser uno de los siguientes:
| valor | describir |
|---|---|
| estable | valor fijo en px, em, … p { espacio entre letras: 0,5 em; } |
| normal | Espaciado normal basado en la fuente seleccionada p { espacio entre letras: normal; } |
notas
- Si la propiedad de espaciado entre letras se expresa como un valor fijo, puede ser positivo o negativo.
- Los valores positivos agregan espacio extra entre caracteres (además del espaciado estándar de la fuente).
- Los valores negativos eliminarán los espacios entre caracteres.
- Si la propiedad de espaciado entre letras se establece en normal, la fuente seleccionada determinará el espaciado entre caracteres.
Compatibilidad del navegador
La propiedad CSS letter-spacing tiene soporte básico para los siguientes navegadores:
- Aleación de cromo
- androide
- Firefox (Geco)
- Firefox móvil (Geco)
- Navegador de Internet (IE)
- es decir, móvil
- ópera
- Ópera Móvil
- Safari (WebKit)
- Safari para móvil
ejemplo
Discutiremos la propiedad de espaciado de letras a continuación, explorando ejemplos de cómo usar esta propiedad en CSS.
valor fijo positivo
Veamos un ejemplo en el que usamos un atributo de espaciado de letras con un valor fijo positivo para establecer espacios adicionales entre caracteres de texto.
CSS se ve así:
p { letter-spacing: 5px; }HTML se ve así:
<div>
<p>This paragraph was written by prograrmaplus.com.</p>
</div>El resultado se verá así:
En este ejemplo de espaciado de letras CSS, estamos en
Se establece un espacio adicional de 5 píxeles entre los caracteres en el marcado. El espacio extra excede el espaciado determinado por la fuente seleccionada.
valor fijo negativo
Veamos qué sucede si aplicamos un valor negativo a la propiedad de espaciado entre letras.
CSS se ve así:
p { letter-spacing: -1px; }HTML se ve así:
<div>
<p>This paragraph was written by prograrmaplus.com.</p>
</div>El resultado se verá así:
En este ejemplo de espaciado de letras CSS, eliminamos 1 px de espacio entre caracteres al establecer un valor de -1 px para la propiedad de espaciado de letras. Esto eliminará parte del espacio entre caracteres agregado por la fuente seleccionada.
normal
Finalmente, veamos cómo se vería el texto si configuramos la propiedad de espaciado de letras en normal (o el valor predeterminado, si la propiedad de espaciado de letras no se estableció).
CSS se ve así:
p { letter-spacing: normal; }HTML se ve así:
<div>
<p>This paragraph was written by prograrmaplus.com.</p>
</div>El resultado se verá así:
En este ejemplo de espaciado de letras CSS, configuramos la propiedad de espaciado de letras en normal, lo que significa que el espaciado entre caracteres está determinado por la fuente seleccionada.