La police s'affiche différemment dans Firefox vs Chrome

Il semble que ma barre de menus s'affiche avec une extension de 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;

Pour autant que je puisse dire, tout ce qui concerne cette police est exactement le même, mais ils s'affichent toujours différemment (voir photo). Pourquoi?

Chrome utilise le moteur de rendu WebKit. Firefox utilise le moteur Gecko. Les deux interprètent et affichent le type légèrement différemment, 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 faire quelques choses pour vous assurer que votre navigation occupe la même largeur entre les navigateurs:

1. Utilisez des images ou des SVG au lieu de taper pour vos éléments de 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

2. Fixez la largeur de chaque élément de navigation avec CSS. La taille du texte sera toujours différente d'un navigateur à l'autre, mais si vous donnez à chaque <li>élément de votre zone de navigation 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 la même.

Les différences de rendu des polices entre les différents navigateurs (et sur les différents systèmes d'exploitation) sont une réalité. Vous devez simplement vous assurer que si la police s'affiche à différentes largeurs, votre conception peut toujours faire face.

Au cas où quelqu'un trouverait cela, le problème était pour moi letter-spacing. Chrome et Firefox gèrent la propriété différemment.

Mon problème était qu'il letter-spacingaffectait la position des autres éléments; en particulier certaines images dans le menu de navigation. En supprimant la propriété, mon problème a été résolu instantanément.

J'ai également lu que l'utilisation spécifique de .pointvaleurs peut avoir des effets de modification entre les 2 navigateurs, ce qui était vrai dans mon cas.

sorte 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 des indices en

J'ai trouvé que le webkit prend en charge px pour la taille de la police, mais pour des choses comme l'espacement des lettres, ils ignoreront tout cela si vous ne les utilisez pas.

Après avoir testé 6 navigateurs / 4 moteurs de rendu sur deux OS. J'ai trouvé que la plupart étaient les mêmes, même avec un interligne. J'examinerai la différence avec Windows et Linux dans une minute.

Je pensais que la police Palatino était disponible partout mais le chrome est tombé à l'époque romaine qui est légèrement plus petite, les polices par défaut ont les mêmes résultats (chrome différent) qui m'induisent un peu en erreur.

Quoi qu'il en soit, si vous spécifiez des heures romaines ou utilisez @fontface pour fournir des fichiers de polices! vous pourrez peut-être rendre vos barres de navigation plus lisses ;-)

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 fière allure. Dans Chrome, l'espacement des lettres était étrange. Supprimer le optimizelegibilitystyle a fait l'affaire. Les deux navigateurs s'affichent désormais de manière identique.

J'ai décidé de supprimer le style du webkit et de le laisser en place pour les autres navigateurs. Ça va bien maintenant.

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;