Safari, letter-spacing avec des polices personnalisées
À l'aide de la Dose, les polices de Google Webfonts ...
@import url(http://fonts.googleapis.com/css?family=Dosis:400,300,200,500,600,700,800);
après de nombreux essais dans Firefox et Safari, tout en étant parfaitement conscient que je ne peux pas obtenir à la fois des navigateurs pour l'afficher tous parfaitement pixel-précisément fine comme la conception originale de vues dans mon photoshop, je suis tombé sur le plus troublant de questions:
letter-spacing
Quoi que j'essaye, je ne peux pas obtenir la lettre de l'espacement de droit dans les navigateurs webkit.
Un exemple simple:
.text-basic {
font-weight: 200;
font-size: 16px;
letter-spacing: 0.52px;
line-height: 22px;
}
Ce qui rend parfaitement bien, la façon dont je le veux, dans Firefox (encore mieux si je hack FF dans 15.5 px taille de la police, ce qui est correct (sauf si quelqu'un a des objections]).
Cependant, dans Safari, la lettre de l'espacement juste ne fonctionnera pas.
Après quelques recherches, j'ai trouvé qu'il ne permettra pas la lettre de l'espacement au-dessous de 1px, mais il est dit qu'il n'donc, si j'utilise em mesures. Ainsi soit-il.
Si j'utilise jusqu'à:
letter-spacing: 0.0618em
Rien ne se passe. Pas de changement. L'espacement des lettres trop faible.
Mais si j'utilise:
letter-spacing: 0.0619em
Tout à coup, il s'enclenche, et l'espacement des lettres est trop élevé. Comme un textblock de 10 mots soudain prend plus de 50 pixels en largeur.
Je ne l'obtenez pas.
Personne ne sait comment résoudre ce problème?
Merci.
OriginalL'auteur SquareCat | 2012-04-16
Vous devez vous connecter pour publier un commentaire.
Je crois que safari est l'arrondi à l'ensemble de pixels quel que soit l'appareil que vous utilisez.
Donc la différence entre 0.0618 em et 0.0619 em est le point où il rounds de à 0px 1px.
Si vous remarquez que la lettre de l'espace est identique dans safari à l'aide de 0.0619 em et 1px;
Malheureusement je n'ai pas de solution, mais j'espère que ce qui contribue à expliquer ce que vous voyez.
oui, c'est "mieux" mais c'est quand vous allez pour de vrai espacement entre les lettres (comme dans votre exemple). j'ai peur, il n'y a pas de véritable solution à cette question. son juste inquiétant que la différence est si grave.
"vrai que l'espacement des lettres"? par opposition à la fausse lettre d'espacement? si vous définissez vos valeurs en ems, une taille de police trop, vous devriez obtenir votre solution souhaitée
Comme indiqué ci-dessus, Safari n'est PAS rendu ces choses correctement, indépendamment de la méthode que j'utilise (px ou em). Par "vrai", je veux dire le réel, correctement calculé que l'espacement des lettres. Je commence à douter qu'il ya une bonne solution à ce problème.
OriginalL'auteur kgiff
Il n'y a pas de solution appropriée à ce problème. Safari /Webkit pour rendre ces choses de manière incorrecte.
Un autre thread, couvrant des questions similaires peuvent être trouvés ici
OriginalL'auteur SquareCat
Ce qui semble être causé que par les polices svg!
Réorganiser votre font-face url mettant svg dernier, il devrait résoudre le problème. Mais svg polices ne pas s'en servir et le rendu peut être sale(re)
aussi, si .SVG est là-haut (avant de .WOFF) il n'a pas d'importance si vous définissez letter-spacing en px ou em (je l'ai mis à 1px), de toute façon il ne sera pas rendu correctement. La seule solution que j'ai trouvé pour l'instant est de cibler le navigateur par navigateur web et personnalisée @font-face déclarations.
OriginalL'auteur Armel Larcier