Taille d'un texte en px

Bonjour,

Je possède un site web sur lequel j'ai défini le texte par défaut à Arial 12px. Le soucis c'est que selon l'OS et/ou le navigateur (je ne sais pas trop bien ce qui joue), la police ne fait pas la même taille. Sur mon Firefox sous Ubuntu la boite englobante d'un mot fait 14 pixels de haut alors que sur Firefox sous Seven, sur Chrome sous Ubuntu et sur Firefox sous Seven la boite fait 15 pixels.

J'ai vraiment besoin de contrôler la taille de mon texte au pixel près et d'avoir le même rendu quelque soit le navigateur/OS.

J'ai également remarqué que sur un mobile (avec Opéra Mobile comme navigateur), le texte de mes menu était beaucoup plus gros que prévu alors que le texte de ma colone centrale lui avait une taille normale.

Savez-vous à quoi cela est dû et s'il existe une solution pour contrôler totalement la taille finale en pixel d'un texte ?

Salut,

A priori tu ne pourras pas vraiment, car le zoom texte sur la plupart des navigateurs modernes contournera cela. Il vaut mieux t'assurer que ton design suive en cas d'agrandissement.

Je souhaite simplement optimiser l'affichage pour le zoom 100%. Avoir quelque chose de parfait pour le zoom par défaut. Après si ce n'est pas le cas quand quelqu'un zoom, ça ne me dérange pas.

En tout cas, les différence de taille que j'ai observer sont pour le zoom par défaut. Comme cela se fait il que Firefox sous Ubuntu ne me génère pas le même texte que Firefox sous Seven ou que Chrome sous Ubuntu ?

Bonjour,

Pas sûr qu' Arial soit présent sur Ubuntu.

Pourtant Chrome sous Ubuntu me génère des textes de la bonne hauteur...

Est-ce du au fait que Arial n'est (peut-être?) pas prévu à la base pour être utilisé en 12 pixel de haut et que selon le navigateur ou l'OS ou la version de Arial installé sur l'OS, il ne fasse pas la même arrondi lors de l'affichage de la police ?
Modifié par cristalboy (30 Oct 2010 - 17:03)

Je me suis rappelé avoir lu un article il y a longtemps:
http://www.pompage.net/pompe/cssdezero-4/

a écrit :
Quand nous parlons de la taille de la police, ou font-size en CSS, cela fait référence à la distance entre le sommet d'une lettre majuscule comme « A » jusqu'au bas d'une lettre à jambage comme « p » ou « y ». Il peut aussi y avoir un léger espace supplémentaire appelé « interlignage ».

Peut-être est-ce cet interlignage qui occasionne la différence que tu constates, en admettant que selon l'OS, Arial n'est pas forcément uilisé.

Merci, ça règle mon problème! Il suffisait de spécifier l'attribut line-height afin de totalement contrôler la hauteur d'une ligne de texte (voir http://www.alsacreations.com/article/lire/563-gerer-la-taille-du-texte-avec-les-em.html).

Par contre, cela n'explique pas pourquoi mes lettres ont un pixel de différence...