tricks - font smoothing css w3schools

El peso de la fuente se vuelve más ligero en Mac/Safari

Question

En mi último sitio web, el texto es perfecto de forma natural en Chrome y Firefox sin tocar el suavizado de fuentes o cualquier otra cosa.
Pero en Mac / Safari 7 el texto aparece bien y luego se vuelve más delgado (demasiado delgado / no agradable de leer).

Después de investigar un poco [cf http://www.usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/]
y algunas pruebas jugando con

-webkit-font-smoothing    

Parece que Safari muestra el texto primero con:

-webkit-font-smoothing: subpixel-antialiased;

Luego, justo después de obtener el efecto de parpadeo, cuando está convirtiendo la fuente en:

-webkit-font-smoothing: antialiased;

Entonces me parece que no tuve más remedio que forzar

-webkit-font-smoothing: subpixel-antialiased;

hacer que mi sitio web sea coherente en todos los navegadores.
Estoy usando font-face Avenir Std Roman.

Algunas explicaciones a ese problema de Safari? ¿Alguna mejor solución? ¿Podría mi fuente ser parte del problema?

Gracias.

Answer 1

Así que resolví mi problema con la aplicación:

body {
    -webkit-font-smoothing: subpixel-antialiased;
}

Ahora mi fuente es consistente en todos los navegadores.

Answer 2

la verdad es que la solución a este problema (hasta que Apple solucione esto) es muy simple. Crea un archivo css (example.css) y adentro inserta esto:

* {-webkit-font-smoothing:subpixel-antialiased;}

Luego, vaya a Safari> Preferencias> Avanzado> Hoja de estilos, haga clic en él y seleccione el archivo css que acabamos de crear. Reinicie Safari.

TADA !! Problema resuelto. Por ahora

Answer 3

prueba ambos

{-webkit-font-smoothing: subpixel-antialiased;
-webkit-text-stroke:1px transparent;}

Answer 4

Simplemente use esto: enlace href = "https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel = "stylesheet"

En lugar de esto, enlace href = "https://fonts.googleapis.com/css?family=Lato" rel = "stylesheet"

problema resuelto para mí de esta manera!

Answer 5

Prueba esto:

transform: translateZ(0.1px);

Los navegadores Webkit en Mac han tenido problemas conocidos con los elementos de texto antialiasing 2d y 3d de forma diferente. Dar la propiedad 3d al elemento generalmente soluciona el problema.

Answer 6

Usar -webkit-font-smoothing: subpixel-antialiased funcionó un poco, pero todavía había demasiada diferencia entre Safari, Chrome y Firefox. Me di cuenta de que tratar de hacer que la fuente fuese más gruesa en Safari no iba a funcionar, así que en lugar de eso, encentré la fuente en otros navegadores y usé un peso de fuente ligeramente más grueso. Lo que terminó normalizando los pesos de fuente en los navegadores para mí es esto:

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;