html - tricks - text rendering optimizelegibility

Texto de Chrome no antialiasing

Question

Google Chrome no está antialiasing mi texto a pesar de que agregué un código específico para Google Chrome para hacerlo.

En una nota extraña, Firefox, que se decía que era incompatible con el código que había agregado , antialía el texto de manera apropiada.

Aquí está el estilo CSS específico:

.jumbotron h1 {
    color: white;
    font-size: 100px;
    text-align: center;
    line-height: 1;
    /*
     * Webkit only supported by Chrome and Safari.
     */
    -webkit-font-smoothing: antialiased;
}

Cromo:

Firefox:

Como puede ver arriba (y probablemente en el sitio web), la fuente se ve mucho mejor en Firefox.

Answer 1

Chrome no es compatible con anti alias si no es un svg, por lo que deberías usar shadow en lugar de texto.

.selector{ text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; }

Answer 2

De acuerdo con este blog: http://www.dev-metal.com/fix-ugly-font-rendering-google-chrome/

Se arreglará en Chrome 37. Y tiene razón. Lo probé en Chrome Canary y funciona.

Answer 3

Este es un problema con Windows 7/8, no con Chrome. Chrome solía mostrar siempre mal. Pero arreglaron eso con compilación 37. Sin embargo, todavía acepta preferencias de representación de fuente de Windows. Entonces, si eres como yo y apagas todas las configuraciones de apariencia elegantes en Windows, entonces necesitarás hacer un ajuste para que Chrome vuelva a renderizarse correctamente.

Para solucionar este problema, debe configurar las fuentes Clear type en Windows y habilitar el suavizado de fuentes en las opciones de rendimiento.

1. • ve al menú de inicio.

   • busque "Ajustar texto ClearType".

   • habilite ClearType y vaya a través del asistente para elegir su configuración. (muy fácil) esto configura el procesador de texto para el siguiente paso. (Si no configura ClearType, el próximo paso seguirá funcionando pero ClearType se verá aún mejor).

2. • ir al menú de inicio

   • buscar "Ajustar la apariencia y el rendimiento de las ventanas"

   • esto abre la pantalla de "Opciones de rendimiento".

   • ve a la primera pestaña "Efectos visuales"

   • si selecciona "Permitir que Windows elija" o "mejor apariencia", entonces está bien. Sin embargo, si elige el mejor rendimiento, deshabilita todo el sistema anti-aliasing. La mayoría de los navegadores (incluido Internet Explorer) ignoran esta configuración. Chrome no.

   • para volver a encenderlo, pero deje todas las demás opciones de rendimiento seleccione "personalizado".

   • cerca de la parte inferior de la lista, marque la casilla de verificación junto a "Suavizar los bordes de las fuentes de pantalla"

   • presionar aplicar

Ahora cierra y vuelve a abrir Chrome. Tendrás un texto mucho mejor.

Answer 4

He buscado una solución a este problema exacto durante unas horas, y finalmente he encontrado algo que funciona para mí, así que quiero compartirlo contigo.

Vaya a chrome: // flags / # enable-direct-write Si DirectWrite está deshabilitado, habilítelo; Si DirectWrite está habilitado, simplemente deshabilítelo;

En mi caso lo he habilitado y funcionó bien.

Aclamaciones

Answer 5

He escrito una gran respuesta sobre este tema aquí: ¿hay algún "suavizado de fuente" en Google Chrome? . La publicación contiene todo lo que necesita saber y cómo solucionarlo. Y este es un error oficial en Google Chrome, los desarrolladores del navegador ya lo saben y están trabajando en una solución.

En resumen, puede agregar esto a su regla de texto para que las fuentes se vean mucho mejor:

text-stroke-fix:

-webkit-text-stroke: 1px

o

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

text-shadow-trick:

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

o

 text-shadow: #333 0px 0px 1px; // for black text

font-smoothing-trick (en combinación con lo anterior):

-webkit-font-smoothing: antialiased;

Nota: Estas son soluciones temporales, no una solución real del problema básico.

Answer 6

NOTA: Chrome 37 y posterior antialias de fuentes fijas, por lo que esta solución ya no se necesita en la última versión de Chrome.

Creo que la mejor solución es convertir tu fuente a svg, ya que Chrome hace las fuentes con antialiasing si el formato del archivo de fuente es svg.

Puede obtener más información aquí en el artículo donde encontré la respuesta yo mismo: http://www.adtrak.co.uk/blog/font-face-chrome-rendering/

Así que, básicamente, debe convertir su fuente al formato svg (utilizando un convertidor de fuentes como Font Squirrel ) y establecer consultas multimedia en su css para que el formato del archivo svg se especifique primero en su declaración de fuente para chrome, pero no para los otros navegadores.

/* This is the default font face used for all browsers. */
@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;
}

/* This font face inherits and overrides the previous font face, but only for chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: ''chunk-webfont'';
src: url(''../../includes/fonts/chunk-webfont.svg'') format(''svg'');
}

Y voilá. La fuente funciona en Chrome con antialiasing.

Answer 7

Simplemente configure el peso de la fuente en Normal. Esto parece resolver el problema en Chrome.

entonces mi CSS que funciona para mí es:

h1.hero-title {
font-family: ''Typefacename'', cursive;
font-size:7em;
-webkit-font-smoothing: antialiased;
font-weight:normal;

}