Différences de taille de texte dans Chrome à Firefox

Question

J'ai vraiment parcouru Google pour une question similaire et n'a rien trouvé, ce qui me déroute.

Quoi qu'il en soit, sur ce http://dev.subverb.net/index.php

L'écriture menu épaisseurs différentes entre les deux navigateurs. C'est la même chose dans les deux cas lorsque le poids de police est réduit à 500, mais quand il est de 600 c'est ce que je veux dans Firefox, mais sensiblement plus épais dans Chrome. Cela casse aussi mon design.

Je n'arrive pas à comprendre ce que cela pourrait être ... des idées?

Answer 1

Vous ne pouvez pas compter sur la cohérence de la largeur de police. Il diffère non seulement d'un navigateur à l'autre, mais il diffère également considérablement d'un système d'exploitation à l'autre. Au lieu de cela, vous devez créer vos conceptions pour permettre une certaine marge dans la largeur de la police. Pour une uniformité légèrement meilleure, essayez d'utiliser html 5 @font-face, qui est maintenant implémenté dans tous les navigateurs modernes.

Mais même dans ce cas, la largeur ne peut pas être garantie - cela garantira simplement qu'au moins la définition de la police est la même. Enfin, vous pouvez utiliser des images pour une cohérence parfaite, mais cela est fortement déconseillé. Il est préférable de laisser une certaine marge de manœuvre dans vos conceptions.

Answer 2

N'utilisez pas les valeurs numériques font-weight. Ils ne sont pas utiles pour la cueillette de multiples poids d'une famille de police parce que:

• soutien du navigateur est faible et le soutien de la police incompatible
• (décrivant leur poids dans le cadre d'une famille complète) est pauvre
• aucun des Les polices OS intégrées que vous utiliserez dans vos règles font-family: ont des poids supplémentaires autres que normaux et gras de toute façon.

font-weight: 600 a longtemps été problématique. Opera et Chrome appear pour utiliser les polices en gras créées synthétiquement sur le poids 600, plutôt que la variante de police en gras véritable qui est utilisée à partir du poids 700 vers le haut. (Les polices synthétiques sont généralement utilisées lorsque le gras ou l'italique est demandé sur une famille qui n'a pas de variante en gras/italique.) De plus, sur Firefox/OSX, 600 était utilisé comme normal.

La valeur de poids correcte alignée sur bold est 700. Mieux vaut simplement s'en tenir aux valeurs normal et bold. Par ailleurs, vous avez également une fausse orthographe de famille de polices (san-serif doit être sans-serif).