tricks - font smoothing css w3schools
El peso de la fuente se vuelve más ligero en Mac/Safari (6)
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.
Así que resolví mi problema con la aplicación:
body {
-webkit-font-smoothing: subpixel-antialiased;
}
Ahora mi fuente es consistente en todos los navegadores.
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
prueba ambos
{-webkit-font-smoothing: subpixel-antialiased;
-webkit-text-stroke:1px transparent;}
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!
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.
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;