¿Hay algún “suavizado de fuente” en Google Chrome?

Estoy usando google webfonts y están bien en tamaños de letra súper grandes, pero a 18px, se ven horribles. He leído aquí y allá que hay soluciones para suavizar fonts, pero no he encontrado ninguna que lo explique claramente y los pocos fragmentos que he encontrado no funcionan en absoluto.

Mi h4 ve horrible en casi todos los navegadores, pero Chrome es el peor. En Chrome, casi todas mis fonts se ven terribles.

¿Alguien puede señalarme en la dirección correcta? ¿Quizás conozcas un recurso que explique esto claramente? ¡Gracias!

EJEMPLO SCREENSHOT # 1

Esta captura de pantalla muestra la página de inicio de https://www.dartlang.org/ , un lenguaje de progtwigción creado por Google (por lo que podemos sugerir que este sitio web también lo comstack Google) y usa Google Webfonts.

La captura de pantalla muestra Google Chrome a la izquierda, Firefox / Internet Explorer a la derecha .:

google chrome a la izquierda, firefox / internet explorer a la derecha

EJEMPLO SCREENSHOT # 2

Esta captura de pantalla muestra una página de información del producto en Adobe.com, utilizando webfonts proporcionados por Typekit. Adobe y Typekit son profesionales cuando se trata de fonts.

La captura de pantalla muestra Google Chrome a la derecha, Firefox / Internet Explorer a la izquierda:

google chrome a la izquierda, firefox / internet explorer a la derecha

Estado del problema, junio de 2014: arreglado con Chrome 37

Finalmente, el equipo de Chrome lanzará una solución para este problema con Chrome 37, que se lanzará al público en julio de 2014. Consulte la comparación de ejemplo de Chrome 35 actual estable y la última versión de Chrome 37 (vista previa de desarrollo inicial) aquí:

enter image description here

Estado de la cuestión, diciembre de 2013

1.) NO hay una solución adecuada al cargar fonts a través de @import , o webfont.js de Google. El problema es que Chrome simplemente solicita archivos .woff de la API de Google que se procesan de manera horrible. Sorprendentemente, todos los demás tipos de archivos de fonts se procesan maravillosamente. Sin embargo, hay algunos trucos CSS que "suavizarán" la fuente renderizada un poco, encontrará la (s) solución (es) más profunda (s) en esta respuesta.

2.) HAY una solución real para esto cuando se autohospeten las fonts, publicadas por primera vez por Jaime Fernández en otra respuesta en esta página de Stackoverflow, que soluciona este problema al cargar las fonts web en un orden especial. Me sentiría mal si simplemente copiara su excelente respuesta, así que por favor eche un vistazo allí. También hay una solución (no probada) que recomienda el uso exclusivo de fonts TTF / OTF, ya que ahora son compatibles con casi todos los navegadores.

3.) El equipo de desarrolladores de Google Chrome trabaja en ese tema. Como ha habido varios cambios enormes en el motor de renderizado, obviamente hay algo en progreso.

He escrito una gran publicación en el blog sobre ese tema, no dudes en echar un vistazo: cómo solucionar el feo renderizado de fonts en Google Chrome

Ejemplos reproducibles

Vea cómo se ve el ejemplo de la pregunta inicial hoy, en Chrome 29:

EJEMPLO POSITIVO:

Izquierda: Firefox 23, derecha: Chrome 29

enter image description here

EJEMPLO POSITIVO:

Parte superior: Firefox 23, abajo: Chrome 29

enter image description here

EJEMPLO NEGATIVO: Chrome 30

enter image description here

EJEMPLO NEGATIVO: Chrome 29

enter image description here

Solución

Reparar la captura de pantalla anterior con -webkit-text-stroke:

enter image description here

La primera fila es por defecto, la segunda tiene:

 -webkit-text-stroke: 0.3px; 

La tercera fila tiene:

 -webkit-text-stroke: 0.6px; 

Entonces, la manera de arreglar esas fonts es simplemente dándoles

 -webkit-text-stroke: 0.Xpx; 

o la syntax de RGBa (por nezroy, ¡encontrada en los comentarios! ¡Gracias!)

 -webkit-text-stroke: 1px rgba(0,0,0,0.1) 

También hay una posibilidad desactualizada : dar al texto una sombra simple (falsa):

 text-shadow: #fff 0px 1px 1px; 

Solución RGBa (encontrada en el blog de Jasper Espejo):

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

Hice una publicación de blog sobre esto:

Si desea recibir información actualizada sobre este tema, eche un vistazo a la publicación correspondiente del blog: Cómo solucionar el feo renderizado de fonts en Google Chrome . Publicaré noticias si hay noticias sobre esto.

Mi respuesta original:

Este es un gran error en Google Chrome y el equipo de Google Chrome sí lo sabe, consulte el informe oficial de fallas aquí . Actualmente, en mayo de 2013, incluso 11 meses después de que se informó el error, no está resuelto. Es extraño que el único navegador que arruina Google Webfonts sea Chrome, el navegador de Google (!). Pero hay una solución simple que solucionará el problema; consulte la solución a continuación.

DECLARACIÓN DEL EQUIPO DE DESARROLLO DE GOOGLE CHROME, MAYO DE 2013

Declaración oficial en los comentarios del informe de error:

Nuestra renderización de fonts de Windows se está trabajando activamente. ... Esperamos tener algo dentro de un hito o dos que los desarrolladores puedan comenzar a jugar. Lo rápido que llega a estable es, como siempre, todo acerca de qué tan rápido podemos eliminar y reducir cualquier regresión.

Tuve el mismo problema, y ​​encontré la solución en este post de Sam Goddard ,

La solución si para definir la llamada a la fuente dos veces . Primero, como se recomienda, para ser utilizado por todos los navegadores, y luego de una llamada particular solo para Chrome con una consulta de medios especial:

 @font-face { font-family: 'chunk-webfont'; src: url('../../includes/fonts/chunk-webfont.eot'); src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'), url('../../includes/fonts/chunk-webfont.woff') format('woff'), url('../../includes/fonts/chunk-webfont.ttf') format('truetype'), url('../../includes/fonts/chunk-webfont.svg') format('svg'); font-weight: normal; font-style: normal; } @media screen and (-webkit-min-device-pixel-ratio:0) { @font-face { font-family: 'chunk-webfont'; src: url('../../includes/fonts/chunk-webfont.svg') format('svg'); } } 

enter image description here

Con este método, la fuente se mostrará bien en todos los navegadores. El único punto negativo que encontré es que el archivo de fuente también se descarga dos veces.

Puedes encontrar una versión en español de este artículo en mi página

Chrome no representa las fonts como Firefox o cualquier otro navegador. Esto generalmente es un problema en Chrome solo en Windows. Si desea suavizar las fonts, use la -webkit-font-smoothing en las tags h4 este tipo.

 h4 { -webkit-font-smoothing: antialiased; } 

También puede usar subpixel-antialiased , esto le dará diferentes tipos de suavizado (haciendo el texto un poco borroso / sombreado). Sin embargo, necesitarás una versión nocturna para ver los efectos. Puede obtener más información sobre el suavizado de fonts aquí .

Ok, puedes usar esto simplemente

 -webkit-text-stroke-width: .7px; -webkit-text-stroke-color: #34343b; -webkit-font-smoothing:antialiased; 

Asegúrate de que el color del texto y el ancho del trazo del texto superior sean iguales y eso es todo.

Antes de todo, diré que esto no siempre funciona , lo he probado con sans-serif y fonts externas como open sans

A veces, cuando usa fonts enormes, intente aproximarse al font-size:49px y superior

tamaño de letra: 48px

Este es un texto de encabezado con un tamaño de 48px (tamaño de font-size:48px; en el elemento que contiene el texto).

Pero, si sube 48px al font-size:49px; (y 50px, 60px, 80px, etc.), sucede algo interesante

tamaño de letra: 49px

El texto se suaviza automáticamente y parece realmente bueno

Por otro lado …

Si está buscando fonts pequeñas, puede intentar esto, pero no es muy efectivo.

Al padre del texto, simplemente aplique la siguiente propiedad css: -webkit-backface-visibility: hidden;

Puedes transformar algo como esto:

-webkit-backface-visibility: visible;

A esto:

-webkit-backface-visibility: oculto;

(la fuente es Kreon )

Considere que cuando no está poniendo esa propiedad, -webkit-backface-visibility: visible; es heredar

Pero ten cuidado , esa práctica no dará siempre buenos resultados, si ves con cuidado, Chrome simplemente hace que el texto se vea un poco borroso.

Otro hecho interesante:

-webkit-backface-visibility: hidden; también funciona cuando transforma un texto en Chrome (con la propiedad -webkit-transform , que incluye rotaciones, sesgos, etc.)

Sin

Sin -webkit-backface-visibility: hidden;

Con

Con -webkit-backface-visibility: hidden;

Bueno, no sé por qué funciona eso, pero funciona para mí. Lo siento por mi extraño inglés.