web-dev-qa-db-fra.com

Comment surmonter les différences de rendu de police spécifiques au navigateur?

Duplicate possible:
Comment puis-je faire en sorte que les polices s'affichent de la même manière sur différents navigateurs Web?

Je travaillais donc sur notre site Web et suis tombé sur un problème intéressant.

Je travaille habituellement avec Chrome lors de la création de contenu Web. Dans Chrome, notre pied de page ressemble à ceci: enter image description here

D'après ce que j'ai entendu, cela ressemble à ceci dans tous les navigateurs Webkit.


Dans IE et Firefox, le même endroit ressemble à ceci: enter image description here

Comme vous pouvez le constater, la police est légèrement plus petite (au moins en largeur et/ou en crénage).


Alors qu'est-ce qui cause ça? La famille de polices que j'ai définie est:

font-family:Calibri, Arial, Helvetica, sans-serif;

Il est évident que Calibri est installé localement (je travaille sur une machine Windows 7). J'ai aussi essayé de mettre en place une webfont pour voir si ça aide. Ce n'est pas le cas (mais peut-être que je me suis planté).

Je suis conscient qu'il n'est pas raisonnable de s'attendre à une correspondance parfaite entre les navigateurs. Mais dans ce cas, la différence est si radicale que je suppose que j'ai simplement commis une erreur.

1
Der Hochstapler

Il y a un question ici qui répond au vôtre. Fondamentalement, c’est comme ça que ça fonctionne, chaque navigateur a son propre moteur de rend (Gecko, Trident, Webkit, etc.) et les différences entre eux ne font que s’exacerber.

Si vous êtes très mécontent du look, vous pouvez envisager une technologie de rendu de police telle que cufon , typeface.js ou SiFr . Ceux-ci permettent d'obtenir des résultats un peu plus cohérents, mais il existe encore des variations.

3
toomanyairmiles