Le poids de la police devient plus clair sur Mac / Safari

Sur mon dernier site Web, le texte est naturellement parfait sur Chrome et Firefox sans toucher au lissage des fonts ou à tout autre élément.
Mais sur Mac / Safari 7, le texte apparaît bien puis s’amincit immédiatement (trop fin / pas agréable à lire). entrer la description de l'image icientrer la description de l'image ici

Après avoir fait des recherches [cf http://www.usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/]
et quelques tests en jouant avec

-webkit-font-smoothing 

Il semblerait que Safari affiche d’abord le texte avec:

 -webkit-font-smoothing: subpixel-antialiased; 

Ensuite, juste après avoir eu l’effet scintillant, quand la police devient:

 -webkit-font-smoothing: antialiased; 

Donc, il me semble que je n’avais pas d’autre choix que de forcer

 -webkit-font-smoothing: subpixel-antialiased; 

pour rendre mon site Web cohérent sur tous les navigateurs.
J’utilise font-face Avenir Std Roman.

Quelques explications à ce problème Safari? De meilleures solutions? Ma police pourrait-elle faire partie du problème?

Merci.

J’ai donc résolu mon problème avec l’application:

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

Maintenant, ma police est cohérente sur tous les navigateurs.

essayez les deux

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

Il suffit d’utiliser ceci: link href = “https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i” rel = “stylesheet”

Au lieu de cela: link href = “https://fonts.googleapis.com/css?family=Lato” rel = “stylesheet”

problème résolu pour moi de cette façon!

Essaye ça:

 transform: translateZ(0.1px); 

Les navigateurs Webkit sur Mac ont connu des problèmes différents avec les éléments de texte antialiasing 2D et 3D. Donner la propriété 3d à l’élément corrige généralement le problème.

Utiliser -webkit-font-smoothing: subpixel-antialiased fonctionnait un peu, mais il y avait encore une trop grande différence entre Safari, Chrome et Firefox. Je me suis rendu compte qu’essayer de rendre la police plus épaisse dans Safari ne fonctionnerait pas, alors, au lieu de cela, j’ai allégé la police dans d’autres navigateurs, puis j’ai utilisé un poids de police légèrement plus épais. Ce qui a fini par normaliser le poids des fonts entre les navigateurs est le suivant:

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

La vérité est que la solution à ce problème (jusqu’à ce qu’Apple ait résolu ce problème) est très simple. Créez un fichier css (example.css) et à l’intérieur insérez ceci:

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

Ensuite, allez dans Safari> Préférences> Avancé> Feuille de style, cliquez dessus et sélectionnez le fichier css que nous venons de créer. Redémarrez Safari.

TADA !! Problème résolu. Pour l’instant