Tengo un sitio web que utiliza la fuente Adobe Source Sans Pro.
En el sitio web, me gustaría crear un logotipo con esta fuente o una similar, pero me gustaría que casi no haya espacio entre los caracteres. ¿Hay alguna manera de que pueda hacer esto solo con css o tendría que usar otra fuente?
Si necesito usar otra fuente, ¿alguien puede sugerir una fuente de código abierto / de uso gratuito que pueda usar para esto?
Muchas gracias.
Hay una propiedad CSS que podrías usar: letter-spacing, que también puede tener valores negativos .
p {
/* 16 * 0.0625 = 1px */
letter-spacing: 0.0625em;
}
La propiedad de espaciado entre letras controla la cantidad de espacio entre cada letra en un elemento o bloque de texto determinado. Los valores admitidos por el espaciado entre letras incluyen valores relativos a la fuente (em, rem), valores relativos a los padres (porcentaje), valores absolutos (px) y la propiedad normal, que se restablece al valor predeterminado de la fuente.
Más información: Trucos CSS sobre el espaciado entre letras
Si solo desea hacer esto para el logotipo, puede tener cada letra en un lapso separado y luego aplicar un margen negativo a los lapsos.
Algo como:
span.letters {
display: inline-block;
margin-left: -3px;
}
En cuanto a la elección de la fuente, podrías probar con Open Sans .
Puede usar espaciado entre letras negativo para lograr ese efecto.
Vea este ejemplo en codepen .
ricardo a
ricardo a
Yisela