css - logo - ¿Hay algún "suavizado de fuente" en Google Chrome?

google logo font

Question

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 fuentes, 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 fuentes 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 programación creado por Google (por lo que podemos sugerir que este sitio web también lo compila Google) y usa Google Webfonts.

La captura de pantalla muestra 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 fuentes.

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

Answer 1

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í:

Estado de la cuestión, diciembre de 2013

1.) NO hay una solución adecuada al cargar fuentes a través de @import , <link href= 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 fuentes 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 fuentes, publicadas por primera vez por Jaime Fernández en otra respuesta en esta página de , que soluciona este problema al cargar las fuentes 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 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 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 fuentes 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

EJEMPLO POSITIVO:

Parte superior: Firefox 23, abajo: Chrome 29

EJEMPLO NEGATIVO: Chrome 30

EJEMPLO NEGATIVO: Chrome 29

Solución

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

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 fuentes es simplemente dándoles

-webkit-text-stroke: 0.Xpx;

o la sintaxis 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 fuentes 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 here . 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 fuentes 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.

Answer 2

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

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

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

El texto se suaviza automáticamente y parece realmente bueno

Por otro lado ...

Si está buscando fuentes 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:

A esto:

(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 -webkit-backface-visibility: hidden;

Con -webkit-backface-visibility: hidden;

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

Answer 3

Chrome no representa las fuentes como Firefox o cualquier otro navegador. Esto generalmente es un problema en Chrome solo en Windows. Si desea suavizar las fuentes, use la -webkit-font-smoothing en las etiquetas 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 fuentes here .

Answer 4

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.

Answer 5

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

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