La police s'affiche différemment dans Firefox et Chrome
Il semble que ma barre de menus s’affiche avec une police différente dans Firefox que dans Chrome. Voir ce qui suit:
Voici le CSS appliqué à cet élément:
font-variant: small-caps;
font-size:13px;
letter-spacing: 0px;
font-family: Arial;
font-stretch: normal;
text-decoration: none;
Autant que je puisse dire, tout ce qui concerne cette police est exactement la même chose, mais ils affichent toujours différemment (voir photo). Pourquoi?
Chrome utilise le moteur de rendu WebKit. Firefox utilise le moteur Gecko. Les types d’interprétation et d’affichage sont légèrement différents, tout comme les moteurs graphiques DirectX et Vega utilisés dans IE9 + et Opera.
Vous ne pouvez pas forcer les navigateurs à afficher le texte de manière identique, mais vous pouvez effectuer plusieurs opérations pour que votre navigation occupe la même largeur sur tous les navigateurs:
Utilisez des images ou des SVG à la place du type pour les éléments de la barre de navigation. Cela peut s'avérer utile s'il est peu probable que votre zone de navigation change souvent. par exemple. www.Apple.com
Fixe la largeur de chaque élément de navigation avec CSS. La taille du texte sera toujours différente entre les navigateurs, mais si vous donnez chaque élément
<li>dans votre zone de navigation d’une largeur de pixel fixe, le cadre de sélection de chaque lien sera très similaire d’un navigateur à l’autre et la largeur totale de la zone de navigation devrait être identique.
Les différences de rendu des polices entre différents navigateurs (et sur différents systèmes d'exploitation) sont une réalité. Vous devez simplement vous assurer que, si la police est affichée dans différentes largeurs, votre conception pourra toujours s’en sortir.
Au cas où quelqu'un tomberait sur cela, le problème pour moi était letter-spacing. Chrome et Firefox gèrent la propriété différemment.
Mon problème était que le letter-spacing affectait la position d'autres éléments; spécifiquement des images dans le menu de navigation. En supprimant la propriété, mon problème a été résolu instantanément.
J'ai aussi lu que l'utilisation spécifique de .point peut altérer les effets entre les deux navigateurs, ce qui était vrai dans mon cas.
genre de même problème indiqué ici
vous pouvez réinitialiser votre css en
http://developer.yahoo.com/yui/reset/ espérons au moins que vous obteniez un indice par
J'ai constaté que webkit supportait px pour la taille de la police, mais pour des choses comme l'espacement des lettres, ils l'ignoreraient tous ensemble si vous ne les utilisiez pas.
J'ai eu un problème similaire et j'ai trouvé une solution:
En utilisant:
font-family: 'Donegal One', serif;
font-variant: small-caps;
text-rendering: optimizeLegibility;
Dans Firefox, ça a l'air génial. En Chrome, l'espacement des lettres était étrange. Supprimer le style optimizelegibility a fait l'affaire. Les deux navigateurs sont rendus de manière identique maintenant.
J'ai décidé de supprimer le style de webkit et de le laisser en place pour les autres navigateurs. Ça a l'air bien maintenant.
Après avoir testé 6 navigateurs/4 moteurs de rendu sur deux systèmes d’exploitation. J'ai trouvé que la plupart étaient les mêmes, même avec l'interligne. J'examinerai la différence entre Windows et Linux dans une minute.
Je pensais que la police Palatino était disponible partout mais chrome est tombé à l'époque romaine qui est un peu plus petite, les polices par défaut ont les mêmes résultats (chrome différent), ce qui me trompe un peu.
Quoi qu’il en soit, si vous indiquez times roman ou utilisez @fontface pour fournir les fichiers de polices! vous pourrez peut-être rendre vos barres de navigation plus lisses ;-)
J'ai eu un problème similaire avec Open-Sans, cela l'a fait pour moi:
-webkit-font-smoothing: subpixel-antialiased;
font-smoothing: subpixel-antialiased;