css - tricks - @ font-face anti-aliasing en Windows y Mac

font smoothing css w3schools

Question

He usado http://www.fontsquirrel.com/ para crear un kit de @ font-face.
Funciona bien, pero el resultado en Windows es diferente del resultado en mac.
En Windows, la fuente parece tener un anti-aliasing incorrecto:
este es el resultado en Mac con FF, Chrome o Safari (todo actualizado a la última versión).
este es el resultado en Windows con FF o Chrome.

Como puede ver, el resultado no es el mismo. En Windows, la fuente es más gruesa y rugosa.
¿Como puedo resolver esto?

Answer 1

-webkit-transform: rotate (-0.0000000001deg);

Actualización: ya no funciona en Chrome 15.0.874.106 m. Aunque funciona en IE9 y Firefox -> Zequez Nov. 4 a las 15:28

ACTUALIZACIÓN: Esto está funcionando (al menos para mí) en Chrome 15.0.874.121 m.

IE9 y Firefox no deberían necesitarlo, ni ser objetivo de él, ya que el selector especifica -webkit- .

Answer 2

¡Yo también he estado plagado de esto en Chrome y creo que acabo de encontrar la respuesta!

A Chrome no le gustó el CSS creado por defecto de fontsquirrel.com.

@font-face {
    font-family: ''HLC'';
    src: url(''/_styles/hlc/hl-webfont.eot'');
    src: url(''/_styles/hlc/hl-webfont.eot?#iefix'') format(''embedded-opentype''),
         url(''/_styles/hlc/hl-webfont.woff'') format(''woff''),
         url(''/_styles/hlc/hl-webfont.ttf'') format(''truetype''),
         url(''/_styles/hlc/hl-webfont.svg#HLC'') format(''svg'');
    font-weight: normal;
    font-style: normal;
}

Para solucionarlo, moví la línea SVG:

url(''/_styles/hlc/hl-webfont.svg#HLC'') format(''svg'')

a la parte superior de la lista. ¡Ahora veo fuentes anti-alias! Creo que Chrome quiere ser el primero ...

/* THIS WORKS FOR ME */
@font-face {
    font-family: ''HLC'';
    src: url(''/_styles/hlc/hl-webfont.eot'');
    src: url(''/_styles/hlc/hl-webfont.svg#HLC'') format(''svg''),
         url(''/_styles/hlc/hl-webfont.eot?#iefix'') format(''embedded-opentype''),
         url(''/_styles/hlc/hl-webfont.woff'') format(''woff''),
         url(''/_styles/hlc/hl-webfont.ttf'') format(''truetype'');
    font-weight: normal;
    font-style: normal;
}

Espero que funcione para usted también. ¡Disfrutar!

Answer 3

Cambiar la configuración en Windows o un navegador en sí no es una solución. Cuando usa @font-face , desea que la fuente se vea bien en cada pantalla de cada navegador, no solo en la suya.

El truco con

text-shadow: 0 0 1px rgba(255,255,255,0.1);

o

-webkit-transform: rotate(-0.0000000001deg);

ya no funciona en Chrome 16.0.912.63 m, Windows Vista.

Sin embargo, no pude encontrar una manera de superar este problema.

Answer 4

Esto es código que estoy usando para arreglar el "problema de renderizado de Chrome":

@font-face {
    font-family: ''fontname'';
    src: url(''fonts/fontname.eot'');
    src: url(''fonts/fontname.eot'') format(''embedded-opentype''),
    url(''fonts/fontname.svg'') format(''svg'');
}

/*if mozilla*/
@-moz-document url-prefix() { 
    @font-face {
        font-family: ''fontname'';
        src: url(''fonts/fontname.ttf'') format(''truetype'');
    }
}

:) funciona para mí ... ¡FINALMENTE!

Answer 5

Esto simplemente se ve como las fuentes normales feas que se procesan en WinXP. Algunas personas (IMO: equivocadas) incluso lo prefieren.

Para obtener anti-aliasing para fuentes de escritorio en general en XP, debe activarlo, desde Propiedades de pantalla -> Apariencia -> Efectos -> Use el siguiente método para suavizar los bordes de las fuentes de pantalla -> ClearType. La configuración predeterminada "Estándar" es la técnica de "borrado de fuentes" de la vieja escuela de Windows que solo se molesta en encenderse en tamaños de letra más grandes, y luego a menudo hace un desastre.

IE7 + tiene una opción activada por defecto para usar siempre el suavizado ClearType para representar fuentes en el navegador web. Otros navegadores web respetarán el método de representación de fuentes configurado por el usuario. Es una pena que tanta gente todavía tenga desactivada esta configuración beneficiosa, pero realmente no es su problema.

(Hay un truco desagradable para que Chrome realice un anti-aliasing en el texto, que es:

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

pero en serio no lo recomendaría.)

Una cosa que puede hacer cuando la configuración "Usar el siguiente método ..." está establecida en "Estándar", para intentar que la fuente obtenga alguna forma de antialiasing, es verificar que la fuente en cuestión no tenga una tabla GASP indica los procesadores TrueType pasados ​​de moda para desactivar el anti-aliasing en determinados tamaños de fuente. Puede cambiar la tabla GASP utilizando un editor de fuentes o con la herramienta de línea de comandos ttfgasp.exe .

Answer 6

Estoy sorprendido de que nadie haya mencionado esto. La aplicación de un ligero -webkit-text-stroke me sirve el truco, sea cual sea el formato (extensión) de la fuente que está utilizando. Algunos recomiendan un -webkit-text-stroke: 1px pero a mí altera la apariencia de la fuente demasiado (lo hace demasiado fuerte). Pero un 0.5px uno hace que el trazo sea casi imperceptible y enciende el antialiasing:

-webkit-text-stroke: 0.5px;

Ponlo en tu definición CSS para la etiqueta html y ¡listo!

Answer 7

Investigué un poco y encontré un truco que creo que hace la diferencia. Pon esto en tu CSS con tus variables de fuente:

-webkit-transform: rotate(-0.0000000001deg);

Además, creo que un negro completo ( #000000 ) tampoco ayuda. Usar una muy oscura pareció ayudarme.

Answer 8

También hay una fuente llamada Vegur que se parece a Myriad Pro pero es legal para incrustar en un sitio web. ¡Espero que ayude!