Técnicas de suavizado de fuente? Shadow de texto Renderizado de manera diferente en Chrome 14.0.833.0 o superior

Question

EDITAR:

Estamos en Chrome 19 ahora, y esto todavía no está arreglado. Solo una aclaración: esto sucede en Chrome en Windows, no en Linux o Mac. Creo que tiene que ver con ClearType. Google, por favor arregle esto.

He estado usando CSS3 text-shadow para emular el suavizado de la fuente de IE9 en otros navegadores. Básicamente, acabo de configurar la sombra de texto del texto de un contenedor en los antecedentes del contenedor. Puedes ver el comportamiento estableciendo text-shadow en un elemento de fuente grande en cualquier cosa inferior a Chrome 14.0.833. El texto se ve suave. Retire la sombra de texto y la fuente se ve irregular. Sin embargo, en Chrome 14.0.833 (actualización: parece que también está "roto" en 14.0.834) esto ya no funciona. La propiedad de Shadow de texto todavía funciona, pero no en la forma en que antes. Puedes ver el comportamiento aquí (solo cargalo con versiones de Diff. Chrome) Parece que en los cromos más antiguos, la sombra de texto comenzó un poco dentro del texto y luego se extendió, por lo que es por eso que funcionó el pirateo de la sombra de texto. En el cromo más nuevo, parece que la sombra de texto comienza solo fuera de El texto, por eso no funcionará. Mira lo que quiero decir aquí.

Mi pregunta es básicamente: ¿Es esto un error? ¿Cuál es el comportamiento esperado, si es tampoco? ¿Hay alguna otra solución para suavizar a la fuente que pueda usar?

El W3C's Especificaciones No parecía decir cuál es el comportamiento previsto, aunque vi que tal vez debería usar la línea de texto (lo cual no es compatible, lo que derrota el propósito)

Answer 1

Bueno, lo he descubierto, por tipo. Molesto ya que puse una recompensa, pero lo que sea. Estoy bastante seguro de que esto no es un error y es un comportamiento esperado, especialmente porque hemos visto algunas iteraciones más de Chrome y se ha mantenido igual. Algunos métodos diferentes funcionan. Escribí un poco para mi blog, puedes ver el artículo completo. aquí, pero aquí está la mayor parte:

Primero, probé el -webkit-text-stroke:1px #000 dónde #000 es el color del texto. Pero este estilo está destinado a usar donde el color del texto es diferente del trazo, para una buena línea de texto. Cuando ambos son del mismo color, se ve ... extraño. No estoy seguro de por qué; No soy un experto en renderizado de fuentes. Puede ver el comportamiento en la imagen después del artículo.

A continuación probé un simple text-shadow:#000 0 0 1px dónde #000 es el mismo color que el texto. Debido al mismo problema de Chrome 14.0.833+, esto todavía deja a la fuente un poco irregular. Sin embargo, es mejor que solo texto sin formato.

Luego probé un combinado de los dos intentos anteriores. Esto se ve un poco mejor, pero aumenta el texto, ya que esencialmente agrega 2 píxeles a la pensamiento del texto.

Por último, intenté aplicar dos sombras de texto: text-shadow:#000 0 1px 1px,#000 0 -1px 1px >> donde #000 es el color del texto. Lo que esto hace es aplicar dos sombras de texto, una de las cuales se empuja un poco hacia abajo y la otra. De esta manera, la sombra de texto cubre los bordes irregulares. Excava un poco el texto, pero definitivamente lo suaviza.

Dependiendo del tamaño de su texto, funcionan diferentes métodos. El texto más pequeño (pero aún irregular) podría usar la sombra de texto, el texto más grande podría usar el método de sombra/carrera, y el texto muy grande podría usar el método de doble sombra. Por supuesto, cuanto más grande sea el texto, menos notable se vuelven los pocos píxeles adicionales. Puedes ver todos los diferentes métodos aquí

Answer 2

De acuerdo, he pasado bastante tiempo en esto y esto es a lo que se trata: es un error.

Ante todo, -webkit-font-smoothing:antialiased; Solo funciona para Mac, no Windows.

Estoy en Windows7, he creado una imagen PIXLR en capas con capturas de pantalla de un jsfiddle que hice que tenía 4 elementos diferentes con diferentes sombras de texto aplicadas a cada una. Puede ver claramente que la sombra de texto ha cambiado desde Chrome13 y Chrome 14.0.835. Tuve que cambiar entre la versión beta y el desarrollo un par de veces porque me equivocé, desinstalando, etc. Ugh.

Descargue el archivo de imagen PIXLR en capas del que hice:

http://dl.dropbox.com/u/7353877/chrome-text-shadow-v13-v14_0_835.pxd

Luego ve a http://pixlr.com/editor/ y elija abrir el archivo desde la computadora, abra el archivo. Ahora en PIXLR, amplíe las cuatro filas de texto, en el panel de capas en la capa superior, haga clic en la casilla de verificación y desmarque, luego verifíquelo nuevamente, hágalo una y otra vez y vea cuán drástico es el cambio a la sombra de texto.

Esto debe presentarse como un error. Se podría usar un enlace a esta página para mostrar el efecto, si es necesario.

Jsfiddle (el jsfiddle que usé en las capturas de pantalla)http://jsfiddle.net/nicktheandroid/xkp9q/

Puse un trozo de pastel en el microondas hace una hora y media ... Hace frío :(

Answer 3

text-shadow: transparent 0px 0px 0px, #000 1px 2px 1px;

O

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

Probado y funciona bien en diferentes versiones de ópera, cromo, safari y firefox.

Answer 4

-webkit-font-smoothing:antialiased; 

podría funcionar para ti

Answer 5

¡SÍ! He encontrado una solución para este problema. Es raro, pero funciona para mí.

Entonces, para que funcione, pon este estilo en el elemento que desea suavizar:

-webkit-border-bottom-left-radius: 1px;
text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01);
overflow: hidden;

He puesto un Muestra de archivo HTML Con solo este estilo para que pueda probarlo rápidamente.

Answer 6

De hecho, así fue como se veían muchasFonts (Google WebFonts y también fuentes altamente profesionales de Typekit, etc.) en Firefox (izquierda) y Google Chrome (derecha) en los sistemas de Windows (y eventualmente también en otros lugares). ¡No es broma! Para aclarar esto: el único navegador que arruinó por completo Google WebFonts fue el navegador de Google Chrome. ¿Qué tan enfermo es eso? En 2013, el navegador de ópera ha cambiado su representación de motor a WebKit (= el motor de rendas en Chrome), por lo que este problema también existe en Opera.

más : http://www.dev-metal.com/fix-ugly-font-rendering-google-chrome/