css - significado - ¿Hay una forma de navegador cruzado para condensar texto en una página?
span html (9)
¿Estás seguro de que estás especificando tus tipos de documento correctamente? Tal vez sus navegadores están interpretando su CSS en modo peculiar, lo que resulta en un comportamiento impredecible.
No creo que jQuery sea de mucha ayuda si letter-spacing no funciona correctamente. No puede alterar las posiciones de las letras individuales a menos que cada letra esté dentro de su propio elemento, como un span , que simplemente parece desordenado.
EDITAR: si desea reducir el ancho horizontal de los caracteres, eso se haría teóricamente con font-stretch: narrower , por ejemplo. Pero parece que el navegador principal no lo admite correctamente o no lo soporta. Aparentemente estaba en CSS2, pero luego cayó en CSS2.1 y ahora está planeado para CSS3.
Estoy buscando una manera de condensar áreas de texto relativamente pequeñas en una página en un esfuerzo por imitar un botón gráfico que se hizo con una fuente no estándar. Idealmente, solo las letras quedarían aplastadas o adelgazadas, dejando el espacio entre las palabras más o menos igual. Sé que hay algunos atributos de CSS que hacen cosas como esta, pero están más enfocados en el espacio entre las letras y no tanto en el ancho de las letras mismas. Estos métodos CSS tampoco son muy fáciles de usar entre navegadores. La mayoría de la base de usuarios está utilizando IE6, por lo que pone una gran restricción en los métodos basados en CSS fuera de los bloques.
Entonces, ¿hay alguna forma de controlar el ancho / espaciado de caracteres que sea compatible con varios navegadores? Sé que jQuery funciona bastante bien en todos los navegadores, así que ¿podría hacerse esto con jQuery manipulando la ubicación de las letras y posiblemente sus anchuras? Estos son pequeños trozos de texto, 5 palabras a la vez, más o menos, por lo que la velocidad es algo que puede tratarse más adelante.
EDITAR: Ok, entonces, la propiedad de espacio entre letras de CSS, así como la propiedad de espacio entre palabras me permitirán controlar el espacio entre letras / palabras. Sin embargo, esto hace que las cosas parezcan aplastadas. Si esta es realmente la única opción, tendré que hacer que funcione, pero lo que realmente estoy buscando es una manera de aplastar las letras, para hacer que los personajes sean más delgados.
Creo que este tipo de cosas probablemente deberían hacerse en un editor de gráficos y enviarlas a una imagen liviana (png o similar). Creo que esta es la única manera simple y confiable de controlar el resultado visual del texto en esta medida.
Asegúrese de repetir el texto en el atributo alt en la etiqueta img para tener acceso.
Este enfoque tiene problemas con la localización, en el sentido de que necesita una versión para cada localidad, pero esto todavía es factible.
También habrá problemas si quiere mantener este texto en línea con algún otro texto, por ejemplo, en medio de un párrafo. Pero si eso es lo que se hace, parece que el "texto comprimido" puede no ser una buena interfaz de usuario.
Entonces, ¿quieres aplastarlo sin aplastarlo?
Intenta ajustar el tamaño de letra luego. O alguna combinación de espacio entre letras, espaciado entre palabras y tamaño de fuente. (Todo lo cual funciona bien en IE6).
.nav {font-size: 80%;
letter-spacing: -.05em;
word-spacing: .05em; }
Puede rastrear la fuente original con WhatTheFont
Suena como una pesadilla.
Puedes cambiar todo el asunto poniendo cada palabra si hay una DIV flotante y toqueteando el ancho de cada DIV.
Tendría que cuestionar la sabiduría de incluso tratar de hacer esto en primer lugar. Simplemente reemplace el maldito gráfico con algo legible; o algo que puedes duplicar con tu texto.
Lo que quiere hacer es cambiar la fuente del texto. Creo que su mejor opción es buscar en un conjunto de fuentes diferentes que vienen preinstaladas para su base de usuarios y tratar de obtener el mejor combo fuente + tamaño.
Respuesta corta: no creo que haya un ejemplo de navegador que satisfaga sus requisitos.
La especificación CSS3 incluye una propiedad de font-stretch , pero lamentablemente, CSS3 es apenas compatible (si es que lo es) en este momento.
Algunas maneras posibles que podrían emular este comportamiento que puedo pensar:
- Use un enfoque basado en flash como sIFR
- Use un enfoque basado en javascript / canvas como Typeface.js . Hay un ejemplo de extensión de fuente incluido en la página de ejemplo
- Use fuentes condensadas (enfoque icky, ya que esto significa que está confiando en que la fuente estará disponible para el cliente), como Arial Narrow.
- Utilice un script del lado del servidor que genere una imagen a partir de parámetros de texto
En resumen, no existe una solución simple y elegante para este problema porque la manipulación de texto e imágenes generalmente es algo que harías en un editor de gráficos .
Si esto no es posible, definitivamente recomendaría buscar en Typeface y sIFR .
Aproximadamente diez años más tarde, font-stretch sigue siendo prácticamente incompatible. Pero transform:scaleX(); va a hacer Aquí .