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

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

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

EJEMPLO DE PANTALLA # 1

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

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

EJEMPLO DE PANTALLA # 2

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

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

Estado del problema, junio de 2014: solucionado 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 estable actual y el último Chrome 37 (vista previa de desarrollo inicial) aquí:

Estado del problema, diciembre de 2013

1.) No hay solución adecuada cuando las fuentes de carga a través de @import, <link href=o de Google webfont.js. El problema es que Chrome simplemente solicita archivos .woff de la API de Google que se reproducen horriblemente. Sorprendentemente, todos los demás tipos de archivos de fuentes se reproducen maravillosamente. Sin embargo, hay algunos trucos de CSS que "suavizarán" un poco la fuente representada, encontrará la solución más profunda en esta respuesta.

2.) Existe una solución real para esto cuando las fuentes se alojan por sí mismas, publicadas por primera vez por Jaime Fernández en otra respuesta en esta página de Stackoverflow, que corrige este problema cargando las fuentes web en un orden especial. Me sentiría mal simplemente copiar su excelente respuesta, así que por favor echen un vistazo allí. También hay una solución (no probada) que recomienda usar solo fuentes 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 importantes en el motor de renderizado, obviamente hay algo en progreso.

He escrito una gran publicación de blog sobre ese tema, siéntase libre de echar un vistazo: cómo solucionar el renderizado de fuentes feas en Google Chrome

Ejemplos reproducibles

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

EJEMPLO POSITIVO:

Izquierda: Firefox 23, derecha: Chrome 29

EJEMPLO POSITIVO:

Arriba: Firefox 23, abajo: Chrome 29

EJEMPLO NEGATIVO: Chrome 30

EJEMPLO NEGATIVO: Chrome 29

Solución

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

La primera fila es predeterminada, la segunda tiene:

-webkit-text-stroke: 0.3px;

La tercera fila tiene:

-webkit-text-stroke: 0.6px;

Entonces, la forma de arreglar esas fuentes es simplemente dándoles

-webkit-text-stroke: 0.Xpx;

o la sintaxis RGBa (por nezroy, que se encuentra en los comentarios! Gracias!)

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

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

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

Solución RGBa (que se encuentra 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 actualizarse sobre este tema, eche un vistazo a la publicación de blog correspondiente: Cómo solucionar el renderizado de fuentes feas 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 errores aquí . Actualmente, en mayo de 2013, incluso 11 meses después de que se informara el error, no está resuelto. Es extraño que el único navegador que arruina Google Webfonts sea el navegador Chrome 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 CHROME DE GOOGLE, MAYO DE 2013

La declaración oficial en el informe de error comenta:

Nuestra representación de fuentes de Windows se está trabajando activamente. ... Esperamos tener algo dentro de un hito o dos con el que los desarrolladores puedan comenzar a jugar. Lo rápido que pasa a estable es, como siempre, todo acerca de qué tan rápido podemos erradicar y quemar cualquier regresión.

Tuve el mismo problema y encontré la solución en esta publicación de Sam Goddard ,

La solución es definir la llamada a la fuente dos veces . Primero, como se recomienda, para usar en todos los navegadores, y después de una llamada particular solo para Chrome con una consulta especial de medios:

@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');
  }
}

Con este método, la fuente se verá 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 procesa las fuentes como Firefox o cualquier otro navegador. Esto generalmente es un problema en Chrome que se ejecuta solo en Windows. Si desea suavizar las fuentes, use la -webkit-font-smoothingpropiedad en sus h4etiquetas como esta.

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

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

Ok, puedes usar esto simplemente

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

Asegúrese de que el color del texto y el ancho superior del trazo del texto sean iguales y listo.

Antes de todo, diré que esto no siempre funciona , lo he probado consans-serif fuentes externas y fuentes comoopen sans

A veces, cuando se utiliza enormes fuentes, tratar de aproximarse a font-size:49pxy superior

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

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

El texto se suaviza automáticamente y parece realmente bueno.

Por otro lado ...

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

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

Puedes transformar algo como esto:

A esto:

(la fuente es Kreon)

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

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

Otro hecho interesante:

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

Sin -webkit-backface-visibility: hidden;

Con -webkit-backface-visibility: hidden;

Bueno, no sé por qué esas prácticas funcionan, pero lo hacen para mí. Perdón por mi extraño inglés.