La même police, sauf que son poids semble différent sur les différents navigateurs.

Question

Le texte s'affiche correctement dans Chrome. Je veux qu'il s'affiche de cette façon dans tous les navigateurs. Comment faire ?

J'ai pu résoudre ce problème dans Safari avec -webkit-font-smoothing: antialiased;

Chrome :

Firefox :

h1 {
    font-family: Georgia;
    font-weight: normal;
    font-size: 16pt;
    color: #444444;
    -webkit-font-smoothing: antialiased;
}

<h1>Hi, my name</h1>

Et un JSFiddle : http://jsfiddle.net/jnxQ8/1/

Answer 1

Veillez à ce que la police soit la même pour tous les navigateurs. S'il s'agit de la même police, alors le problème a été résolu. aucune solution en utilisant CSS multi-navigateur .

Comme chaque navigateur possède son propre moteur de rendu des polices, elles sont toutes différentes. Ils peuvent également différer dans les versions ultérieures, ou sur différents systèmes d'exploitation.

UPDATE : Pour ceux qui ne comprennent pas les différences de rendu des polices entre les navigateurs et les systèmes d'exploitation, lisez ceci y ce .

Toutefois, la différence n'est même pas perceptible par la plupart des gens, et les utilisateurs l'acceptent. Oubliez la conception cross-browser au pixel près, à moins que vous ne soyez.. :

1. Essayer de désactiver le rendu sous-pixel par CSS (tous les navigateurs ne le permettent pas et le texte peut être laid...)
2. Utilisation d'images (les ressources sont exigeantes et difficiles à maintenir)
3. Remplacer Flash (nécessite un peu de programmation et ne fonctionne pas sur iOS)

---

UPDATE : J'ai vérifié la page d'exemple. Le réglage du crénage par le rendu du texte devrait aider :

text-rendering: optimizeLegibility; 

Plus de références ici :

1. Une partie du rendu de la police est contrôlée par font-smoothing (comme mentionné) et une autre partie est text-rendering . Il peut être utile de régler ces propriétés, car leurs valeurs par défaut ne sont pas les mêmes d'un navigateur à l'autre.
2. Pour Chrome, si l'affichage n'est toujours pas correct, essayez ceci hack text-shadow . Il devrait améliorer le rendu des polices de Chrome, en particulier sous Windows. Cependant, le text-shadow deviendra fou sous Windows XP. Soyez prudent.

Answer 2

Afin de normaliser au mieux les polices intégrées à votre @font-face dans les différents navigateurs, essayez d'inclure les éléments ci-dessous dans votre déclaration @font-face ou dans le style de police de votre corps :

speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;

À l'heure actuelle, il semble qu'il n'y ait pas de solution universelle pour toutes les plateformes et toutes les versions de navigateur. Comme indiqué fréquemment, tous les navigateurs/OS ont des moteurs de rendu de texte différents.

Answer 3

Vous trouverez d'excellentes informations à ce sujet ici : https://bugzilla.mozilla.org/show_bug.cgi?id=857142

Nous sommes toujours en train d'expérimenter, mais jusqu'à présent, une solution peu invasive, destinée uniquement aux FF, a été trouvée :

body {
-moz-osx-font-smoothing: grayscale;
}

Answer 4

Je ne pense pas que l'utilisation de "points" pour la taille de la police sur un écran soit une bonne idée. Essayez d'utiliser px ou em pour la taille de la police.

De W3C :

Ne spécifiez pas la taille de la police en pt, ou d'autres unités de longueur absolue. Elles rendent de manière incohérente sur les plateformes et ne peuvent pas être redimensionnées par l'agent utilisateur (par exemple, le navigateur).

Answer 5

Essayez text-rendering: geometricPrecision; .

Différent de text-rendering: optimizeLegibility; Le dernier permet d'activer le crénage et les ligatures.