web-dev-qa-db-fra.com

Le poids des polices devient plus léger sur Mac / Safari

Sur mon dernier site Web, le texte est parfait naturellement sur chrome et firefox sans toucher au lissage des polices ou autre chose.
Mais sur Mac/Safari 7 le texte apparaît bien puis devient immédiatement plus fin (trop fin/pas agréable à lire). enter image description hereenter image description here

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

-webkit-font-smoothing

Il semble que Safari affiche d'abord le texte avec:

-webkit-font-smoothing: subpixel-antialiased;

Puis juste après avoir obtenu l'effet de scintillement, quand il transforme la police en:

-webkit-font-smoothing: antialiased;

Il me semble donc 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 la police de caractères Avenir Std Roman.

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

Merci.

cssfontssafarifont-smoothing
48
migswd

J'ai donc résolu mon problème d'application:

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

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

76
migswd

essayez les deux

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

tilisez simplement 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: lien href = "https://fonts.googleapis.com/css?family=Lato" rel = "feuille de style"

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

3
Martin Jutras

En utilisant -webkit-font-smoothing: subpixel-antialiased a fonctionné un peu, mais il y avait encore trop de différence entre Safari, Chrome et Firefox. Je me suis rendu compte qu'essayer de rendre la police plus épaisse dans Safari n'allait pas fonctionner, alors j'ai plutôt rendu la police plus légère 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 polices dans les navigateurs pour moi est le suivant:

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

Essaye ça:

transform: translateZ(0.1px);

Les navigateurs Webkit sur Mac ont connu un problème différent avec l'anticrénelage des éléments de texte 2D et 3D. Donner la propriété 3d à l'élément résout généralement le problème.

0
Rauli Rajande