Google Chrome text shadow rendering

Google Chrome tiene un defecto extremadamente molesto en su implementación de CSS3 text-shadow. El antialiasing subpíxel se desactiva cuando se aplica text-shadow. Ninguna cantidad de -webkit-font-smoothing lo persuadirá de lo contrario. El crudo anti-alias de canal alfa conduce a la mezcla entremezclada con las letras y esto junto con el texto pixelado termina produciendo un aspecto muy desagradable. Esto es aún más evidente si se usan fuentes de escritura a mano como Monotype Corsiva http://www.newfonts.net/index.php?pa=show_font&id=130 Google Chrome text shadow rendering

Uno de los lugares en los que puede ver esto claramente está en Twitter - http://dev.twitter.com/pages/auth. La sombra de texto se utiliza para el contorno del texto: ver la página en Chrome, comparar con FF o IE, verá lo malo que es.

El efecto empeora con el texto más pequeño hasta que se vuelve completamente ilegible. La discusión técnica del problema está disponible aquí: http://www.google.com/support/forum/p/Chrome/thread?fid=5d1c0f2082af0f21000483e9a516d36e&hl=en

Se ha enviado un error al proyecto Chromium (número 23440). Este error ha estado alrededor de más de un año y todavía no está asignado a nadie. Los desarrolladores de Google lo vieron, decidieron que no era tan importante y lo dejaron a la edad. ¡Resulta que solo arreglan los errores "populares", una práctica tan tonta que se ve impresionante! Estoy muy decepcionado con Chrome! Cada día, más y más personas utilizan la tipografía web y CSS3 para hacer que la web sea un lugar mucho más hermoso. Es una pena que exista ese problema para desacelerarlo.

Por lo tanto, se necesita un esfuerzo público para solucionar este problema. Cuéntales a otros acerca de esto, escribe en tus blogs. Puede ir al http://code.google.com/p/chromium/issues/detail?id=23440 y votar por el problema. Puede hacerlo haciendo clic en la estrella ubicada en la parte superior izquierda de la página (se requiere algún tipo de cuenta de Google: gmail, etc.).

Para hacer las cosas más claras - mi pregunta tiene dos objetivos:

Encuentra una solución técnica.
Haga que Google solucione el problema en Chrome.

Voy a votar cada enlace publicado en un artículo sobre el tema y marcar como aceptada la mejor solución tecnológica o esfuerzo público.

Fuente

2010-10-28 Boris Hamanov

@sebastian's fix puede no funcionar para las versiones anteriores de Chrome.
Captura de pantalla en el Navegador de planchas (horquilla de Chromium) v3.0.197.0:

Todos los que se les ha asignado una sombra tienen el mismo aspecto y -webkit-font-smoothing no tiene ningún efecto, así como -webkit-text-stroke.

En cambio, he experimentado hasta que he llegado con esta revisión: http://jsbin.com/acalu4

tldr: añadir una inocua 0 0 0 transparent, antes de su otra sombra (s).

Problemas conocidos: algunos navegadores solo pueden manejar 1 text-shadow. Para no afectarlos (eliminando sus únicas sombras), esto se debe aplicar a través de javascript solo a Chrome.

Fuente

2011-01-28 17:59:44

¡Realmente funciona! ¡Gracias compañero! Muy buena respuesta! –

perfecto! Gracias. – jsonx

Respuesta increíble. Gracias. –

la primera parte (solución técnica): le da al texto un trazo fino.

pruebe este CSS, puede que tenga que ajustar los valores para obtener el efecto deseado.

-webkit-font-smoothing: subpixel-antialiased; /* or antialiased; */ 
-webkit-text-stroke: .10pt black; /* or 0.01em might be better */

sólo navegadores WebKit (Chrome, Safari) leen, por lo que no afectarán FF o IE.

juego con un ejemplo aquí: http://jsfiddle.net/SebastianPataneMasuelli/NfmU7/6/

Fuente

2010-11-23 08:45:10

Siento decir que no funciona. -webkit-font-smoothing: subpixel-antialiased; es el valor predeterminado de todos modos, establecerlo en antialiased no parece marcar la diferencia. webkit-text-stroke en realidad se dibuja DENTRO del texto, las letras son muy delgadas, por lo que nada debería hacerlas más delgadas. El problema real que tengo con Chrome es que la sombra se proyecta sobre las letras vecinas en lugar de sobre ellas, como debería ser. Actualizaré mi pregunta. –

funciona en Mac ..: http://christophzillgens.com/en/articles/-webkit-font-smoothing-reloaded –

Tal vez funcione en hacer el texto más legible, pero mi problema no es en realidad con el texto, pero con su sombra Sin el texto, sombree el texto si está perfectamente bien. Y sí, antialiased aún no tiene ningún efecto en Windows. –

he encontrado una solución para esto. Parece funcionar en Safari 4+, Chrome (probado en 8.0x) y Firefox 3.5.

Práctica:

text-shadow: 0px 0px rgba(0,0,0,0.75), 
      0px 1px rgba(0,0,0,0.75), 
      1px 0px rgba(0,0,0,0.75), 
      0px 0px rgba(0,0,0,0.75);

Fuente

2011-01-16 00:21:25

¿Cómo funciona ese arreglo? ¿Te importaría elaborar? Parece que creará cuatro sombras en lugar de una? ¿Cuál es exactamente la solución? Las cuatro sombras? Estos parámetros exactos, smth. como los números mágicos? ¿Qué sucede con mi declaración de sombra cuando agrego este? ¿Lo elimino? –

@ avok00. Lo que sé es que esto funciona. Si no me equivoco, cada grupo coloca la sombra arriba, derecha, abajo, izquierda. Entonces, estoy seguro de que sabe esto, pero la sintaxis sombra de texto utiliza X-offset, Y-offset, difuminar y color (RGB y una para alpha, por supuesto). Por lo tanto, en mi publicación anterior, no usamos desenfoque, porque la sombra se dibuja arriba, derecha, abajo e izquierda. sombra de texto: * TOP * x-offset y-offset rgba (0,0,0,0.75), * DERECHA * x-offset y-offset rgba (0,0,0,0.75) etc ... ¡Espero que esto ayude y sea lo suficientemente claro! –

Estoy equivocado. No tiene nada que ver con arriba, derecha, abajo, izquierda, sino con múltiples niveles de sombreado. Chris Spooner tiene un gran conjunto de demos aquí: http://line25.com/articles/using-css-text-shadow-to-create-cool-text-effects. ¡Mira la muestra de Fuego! –

Google Chrome text shadow rendering

Respuesta

Cuestiones relacionadas