¿Cómo puedo mejorar la apariencia de la fuente en Google Chrome?

.

A la izquierda está Firefox 4, a la derecha está Chrome 12. ¿Hay alguna manera de hacer que Chrome renderice fuentes más bonitas?

La imagen de arriba fue tomada en Windows XP. A continuación se muestra otro ejemplo de Windows 7.

Verifique la configuración de ClearType: parece que la captura de pantalla de Chrome está siendo forzada a renderizar sin anti-alias. Eso matará casi cualquier fuente web, ya que no tienen pistas monocromáticas (por razones de tamaño, entre otras cosas). Solía ​​ver que esto se informaba como "IE procesa mejor el texto", porque ignora la configuración de ClearType a nivel del sistema operativo y la activa de forma predeterminada.

¡Todas esas respuestas están equivocadas! Este es un gran error en Google Chrome, consulte el informe oficial de errores / hilo que incluye muchas capturas de pantalla aquí: Informe oficial de errores en el código de Chrome

Actualmente, la mejor solución es simplemente dar a su elemento / título esta simple regla:

-webkit-text-stroke: 1px

Adición del Dr. John: Encontré una sugerencia que html { -webkit-text-stroke: 0.25px}también funcionaría: la encontré aquí https://groups.google.com/forum/?fromgroups#!topic/mathjax-users/dV_TmJ1QMO4

Chrome está leyendo su configuración ClearType que en Windows XP está desactivada de manera predeterminada.

1. Para solucionar el problema, primero cierre el navegador Chrome.

2. Ahora haga clic derecho en cualquier lugar del escritorio y seleccione 'Propiedades' en el menú desplegable.

3. Haga clic en la pestaña 'Apariencia' que se encuentra en la parte superior de la nueva ventana.

4. Y haga clic en el botón 'Efectos'.

5. La segunda opción hacia abajo debería leer: "Use el siguiente método para suavizar los bordes de las fuentes de pantalla".

6. Seleccione la opción "ClearType".

7. Haga clic en Aplicar y vuelva a abrir su navegador Chrome.

De ahora en adelante, Chrome hará que tus fuentes estén bien suavizadas para lograr ese efecto suave.

Coloque el archivo SVG más arriba en la regla css de font-face, primero o segundo, por ejemplo:

@font-face {
font-family: 'gothbook';
src: url('fonts/gothamrnd-book-webfont.eot');
src: url('fonts/gothamrnd-book-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/gothamrnd-book-webfont.svg#GothamRoundedBookRegular') format('svg'),
     url('fonts/gothamrnd-book-webfont.woff') format('woff'),
     url('fonts/gothamrnd-book-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

En lugar de:

@font-face {
font-family: 'gothbook';
src: url('fonts/gothamrnd-book-webfont.eot');
src: url('fonts/gothamrnd-book-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/gothamrnd-book-webfont.woff') format('woff'),
     url('fonts/gothamrnd-book-webfont.ttf') format('truetype'),
     url('fonts/gothamrnd-book-webfont.svg#GothamRoundedBookRegular') format('svg');
font-weight: normal;
font-style: normal;
}

Se pueden ver ejemplos de esta solución aquí:

Ejemplos de
FontSpring Ejemplos de Adtrak

¿Tiene la aceleración de GPU habilitada en Google Chrome? Escriba about:flagsy busque GPU Accelerated Canvas 2D, deshabilítelo si está habilitado. Las fuentes en algunos sitios parecen realmente irregulares cuando navegué con la aceleración habilitada.

Dentro de Google Chrome, haga clic en la Llave inglesa> Opciones> Bajo el capó> [junto al Contenido web] haga clic en Personalizar fuentes.

Cambia tu configuración para que tu página se parezca a la mía

Luego haga clic en la x y vea si su problema está solucionado.

Si esto no lo soluciona, puede haber una cosa más ... pero esperaré hasta que lo intentes.

Chrome no procesa bien las fuentes web en este momento. Hay varios errores en su rastreador de problemas para esto. Destaque los que sean relevantes para usted para prestarles más atención.

Tuve exactamente el mismo problema, renderizando webfonts de http://www.google.com/webfonts en Chrome. Intenté todas las sugerencias sobre este y otros sitios y ninguno funcionó.

Eventualmente comencé a inspeccionar las propiedades CSS del texto afectado, resultó en el color de fuente real que estaba causando el problema. Un título dado se color:#454545vería mal, sin embargo, el mismo título dado lo siguiente: color:#333funcionó bien. ¡Gracias a Dios por las hojas de estilo específicas del agente de usuario!

En Windows XP, acabo de cambiar la opción anti-alias de "Predeterminado" a "Borrar tipo" en
Pantalla → Propiedades → Apariencia → Efectos visuales.

Chrome toma el valor clearType del sistema para las fuentes. Verse mejor en Windows 7 explica eso. En una Mac, supongo que Anti-aliasing está habilitado para todas las fuentes de tamaño superior a 8. Intente encender o cambiar el clearType de su máquina Windows

Actualización : Parece que Chrome 22 o superior ignora la configuración del sistema paraclearType

Tuve este problema tan gravemente en Windows XP SP3 que dejó a Chrome inutilizable para todos los efectos. Me di cuenta de que había instalado Clear Type Tuning en el Panel de control e intenté desmarcar "Activar suavizado de fuentes" en la pestaña avanzada. Después de reiniciar Chrome. estuvo bien, incluso después de encender Font Smoothing nuevamente. Decidí marcar la casilla "Aplicar todas las configuraciones a los valores predeterminados para nuevos usuarios y sistema".

Para mí no era la configuración ClearType en Windows 10.1 x64, pero resultó ser una configuración en mi navegador Chrome llamada DirectWrite.

1. En su barra de direcciones en Chrome escriba: chrome://flags/#directwrite
2. Y active DirectWrite, el título de esta configuración dice Desactivar DirectWrite y asegúrese de que el botón debajo de él muestre la palabra: Activar

Eso solucionó el problema para mí.

Parece que la respuesta larga y difícil es que no puedes. Hay muchas discusiones y sugerencias en la ayuda de Chrome , pero no veo nada que valga la pena sugerir.

¡La gran pregunta es cómo estás haciendo que se vea tan mal! Estoy usando Chrome para escribir en este cuadro ... Incluso amplié un montón y no veo nada como tú. Si aún tiene preguntas después de esto, debe explicar su configuración a la comunidad.

Aunque Chrome es "utilizable" para las fuentes, se ve delgado y desteñido donde representa especialmente las líneas diagonales. IE rinde mucho mejor, pero IE es un navegador más lento y, por lo tanto, FireFox.

Creo que esto es inherente al código de Chrome.

Por cierto, HackToHell, ¿a dónde voy para cambiar el color de renderizado?

Intentaré esto

presione la tecla de Windows + r y luego escriba cttune.exe allí

El método alternativo es presionar la tecla de Windows, luego escribir cleartype y luego seleccionar Ajustar texto ClearType

y siga las instrucciones, si aún tiene problemas, pruebe algunos de los otros ejemplos

esto funcionó para mí, tienes que probar los diferentes ejemplos, es muy parecido a la calibración de contraste / brillo, pero para el texto en su lugar

FYI: deshabilitar la aceleración 2d podría ayudar a que Chrome juegue con la herramienta de ajuste de Windows Cleartype

Si desea que las fuentes web sean legibles y al mismo tiempo deshabilite el suavizado de fuentes / cleartype, la solución es deshabilitar las fuentes web en Google Chrome. En tal caso, el navegador utilizará las fuentes estándar del sistema operativo que se representan correctamente cuando cleartype / smoothing está desactivado. Para hacerlo, pase la /disable-remote-fontsbandera a chrome.exe. Haga clic en el acceso directo de Google Chrome en el escritorio, seleccione Propiedades, vaya a la pestaña Acceso directo y configure Destino en:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" /disable-remote-fonts

Puede haber un problema con la desactivación de las fuentes web. Si el sitio web utiliza iconos de fuentes web, no se mostrarán.

El problema correspondiente en Chromium tracker:

"La configuración ClearType de todo el sistema no se respeta para las fuentes web" https://code.google.com/p/chromium/issues/detail?id=319429

Vaya a chrome://flags/(o about:flags) y desactive la opción Anular la lista de representación del software .

El lienzo 2D acelerado también debe estar deshabilitado.

Esa combinación me ayudó.

Vaya a chrome: // flags / y configure "Antialiasing de texto LCD" en habilitado. Reinicia el navegador.