Problème de rendu de font-size dans IE9

Salut,

Je suis en train de tester un site sous IE9, et la taille de police est + grosse et + grasse que dans IE8/FF/Safari/Chrome.
Avez-vous remarqué ce problème ?

J'utilise la déclaration suivante pour styler les fontes (issue de yahoo YUI Library) et je déclare ensuite les tailles de polices en pourcentage.

source : http://developer.yahoo.com/yui/fonts/

body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}
select,input,button,textarea,button{font:99% arial,helvetica,clean,sans-serif;}
table{font-size:inherit;font:100%;}
pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}

Merci
Modifié par seuferAlsa (16 Mar 2011 - 18:55)

Bonjour,

C'est sans doute dû à l'utilisation de DirectWrite dans IE9 pour le rendu du texte. En gros c'est un rendu du texte plus lissé, qui utilise moins de hinting (adaptation du tracé de la lettre à la grille de pixels) et respecte mieux le dessin original de la lettre. Ça peut donner une impression de texte plus gras.

Pour la taille de texte supérieure, c'est peut-être une question d'arrondi? Quelle est la valeur absolue (computed value) du texte en question?

Merci pour cette réponse

A quoi correspond la computed value?

Je vais essayer de fixer la taille de la police en pixel et voir ce que ca donne...
Peut-être que l'utilisation des EM serait mieux adapté

A suivre

Quelques résultats avec les styles suivants:

body{
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
line-height:1.22;
}
p.pixel{
font-size:15px;
}
p.pourcent{
font-size:116%;
}

- Sous IE7/IE8/FF/Safari/Chrome : p.pixel et p.pourcent ont la même apparence
- Sous IE9 : p.pourcent est + grand et + gras que p.pixel


Voici le résultat en utilisant les % ( notez également que le dégradé CSS ne passe pas sous IE9 !)


Je veux bien de l'aide, je ne sais pas quoi faire.
Merci

seuferAlsa a écrit :
- Sous IE7/IE8/FF/Safari/Chrome : p.pixel et p.pourcent ont la même apparence
- Sous IE9 : p.pourcent est + grand et + gras que p.pixel

Valeur calculée de font-size pour p.pixel: 15px.
Valeur calculée de font-size pour p.pourcent: 15.08px.

Pour une valeur de 15.08px, la plupart des navigateurs vont faire un arrondi à 15px. Mais ce n'est pas systématique, ça dépend du navigateur et du système d'exploitation (et donc des librairies système de rendu des fontes disponibles). Par exemple avec Firefox 4 sur Mac, j'obtiens un rendu différent entre 15.00px et 15.08px:



Tu peux voir les valeurs calculées (computed value) de n'importe quelle propriété CSS pour un élément donné en utilisant Firebug ou un outil équivalent.

Pour des explications sur la notion de valeur calculée, j'ai envie de dire que ça se trouve sans trop de peine sur un moteur de recherche (ou en parcourant la spec CSS 2.1).

seuferAlsa a écrit :
notez également que le dégradé CSS ne passe pas sous IE9 !

Bah oui: http://caniuse.com/css-gradients (pas de support dans IE)
Tu peux éventuellement obtenir un dégradé CSS dans IE 7-9 en utilisant une syntaxe propriétaire (via la propriété filter/-ms-filter).

seuferAlsa a écrit :
Je veux bien de l'aide, je ne sais pas quoi faire.

Pourquoi donc faudrait-il faire quelque chose?

La différence entre les deux navigateurs ne me choque pas. En passant, tu as testé avec Firefox 4? Firefox aussi a apporté des changements à son rendu des fontes, donc tu peux avoir ce type de différence entre Firefox 3.6 et FF4.

La solution consiste donc à apprendre le lâcher-prise, et à ne rien faire.
Modifié par fvsch (17 Mar 2011 - 14:24)

Merci pour toutes ces infos et le lien sur le support css, très pratique

Pour les gradients CSS, j'utilise CSS3PIE pour ie7/ie8 et ca marche plutot pas mal.
Le truc, c'est que css3pie est désactivé sous IE9 car il est censé accepter les propriétés CSS3.
>> Jason de css3pie.com est en train de développer une solution en utilisant SVG pour IE9, voir ici : http://css3pie.com/forum/viewtopic.php?f=3&t=609

Pour les typos, en passant à 115%, je suis à 14.95px en valeur calculée, et le rendu est le même sous FF et IE9 (soit 15px)
Apparement, IE9 n'arrondi pas à l'entier inférieur..

En tout ca, je trouve le nouveau rendu des polices sous IE9 à ch*er, on dirait de la grosse bouillie !

seuferAlsa a écrit :
En tout ca, je trouve le nouveau rendu des polices sous IE9 à ch*er, on dirait de la grosse bouillie !

Question d'habitude. Vraiment.