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

14

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:

extension de police différente

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?

Goro
la source
1
Avez-vous d'abord effectué une réinitialisation CSS?
kei
@kei: Reset ne semble pas avoir d'effet
Goro
Intéressant. J'obtiens le même résultat que votre image: jsfiddle.net/YGwcn Cela semble se résumer à la façon dont chaque navigateur interprète le style.
kei

Réponses:

14

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.

pseudo
la source
5
Vous devez être prudent avec des choses comme "Utiliser des images au lieu de taper pour vos éléments de barre de navigation". Les images seront horribles sur les machines plus récentes avec des écrans haute résolution (par exemple, les écrans Apple "Retina", certains autres téléphones intelligents), sauf si vous fournissez également une copie à double résolution.
Olly Hodgson
@OllyHodgson Bien sûr. Les PNG ou SVG double taille (qui est ce qu'Apple utilise pour leur navigation) seraient les meilleurs pour les écrans haute résolution.
Nick
@ Nick - Oui, SVG serait la meilleure solution.
m93a
Pas dans ce cas, ce ne serait pas le cas. Firefox ne prend pas en charge letter-spacingles éléments SVG.
Yay295
@ Yay295 Vous pouvez décrire les polices dans le SVG.
Nick
5

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.

paulmorriss
la source
2

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.

Mike
la source
0

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.

Alan Hughes
la source
0

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 ;-)

Kevin Chadwick
la source
0

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.

Andy
la source
0

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;
abc
la source