[résolu] Police différente sous Mac

Bien le bonjour,

Je m'arrache les cheveux depuis plusieurs heures, depuis qu'on m'a fait part d'un problème sur un site.

Il s'affiche parfaitement sur tous les navigateurs (bon, IE6 mis à part...), mais pas sur Mac.
J'ai même téléchargé Safari sur mon PC, et le résultat est différent de sur Mac. Ce n'est donc pas un problème de navigateur mais de système d'exploitation.

Le plus étrange c'est que ce problème de police n'apparait qu'à un endroit du site, dans le menu.
J'ai fait une copie d'écran de la version PC, que j'ai superposée à la version Mac, et tout est (horizontalement du moins) identique, sauf le texte dans mon menu, qui est nettement plus "large" sur Mac. Je n'arrive pas à savoir si c'est la taille du texte qui est supérieure, ou la graisse, ou l'interlettrage... mais quelque chose ne vas pas !
Le problème, c'est que comme il s'agit d'un menu horizontal, réglé au pixel près, il part en vrac sur Mac, et mon site avec.

Voici le code html de mon menu :

<ul id="navigation">
<li><a>qui sommes-nous ?</a></li>
<li><a>nos solutions</a></li>
<li><a>notre &eacute;quipe</a></li>
<li><a>nous contacter</a></li>
</ul>

Et voici le css associé :

#navigation {
	position:absolute;
	top:0;
	left:0px;
	background-color: #999;
	width:100%;
}

#navigation li {
	float:left;
	position:relative;
}

#navigation a {
	background-color: #999;
	text-transform: uppercase;
	color: #FFF;
	text-decoration: none;
	font-size: 11px;
	display:block;
	height:25px;
	padding-left:16px;
	padding-right:16px;
	padding-top:8px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #666;
}

La ligne qui met vraiment le boxon sans la moindre raison, c'est

font-size: 11px

(elle était en "em" à l'origine, mais je l'ai passée en pixels, espérant que le problème venait de là) : à 12 pixels, tout le monde est pareil. A 11 pixels, la police sur mac est trop grande, pas sur windows. Et quand je la passe en corps 10, alors là c'est le pompon : le menu qui devrait prendre moins de place (je réduis la taille du texte, sans toucher à quoi que ce soit d'autre) explose (le 4eme élément de menu passe à la ligne) !

Si une âme charitable pouvait se pencher sur mon problème, je lui en serai infiniment reconnaissant !

PS : l'adresse du site, ça peut servir : http://www.comonsite.fr/pagepersonnel/mini_site/page_outsourcing/index.html
Modifié par Ralf (22 Mar 2011 - 11:50)

Bonjour,

Ne s'agirait-il pas du même problème qu'ici : http://bbxdesign.com/2009/01/08/le-rendu-de-texte-sous-safari/ ??? (lissage de police qui agrandit cette dernière)

Malheureusement, la solution proposée est un hack (déconseillé).

Cordialement

Bonjour,
Ça semble lié, toutefois comme je l'indiquais, la police est différente non pas d'une navigateur à un autre, mais d'un système d'exploitation à un autre.

Firefox et Safari sur PC : parfait.
Firefox et Safari sur Mac : police trop grande (large ? espacée ?)

Firefox et Safari sont-ils paramétrés à l'identique sur Mac que sur PC ?

La police utilisée est-elle valable et sur PC, et sur Mac ?
Modifié par lddsoft (21 Mar 2011 - 18:15)

Windows et Mac OSX ont chacun leur propre moteur de rendu des typo. Il n'est donc pas anormal qu'il y est de légères variation entre les deux.

Les question à se poser sont surtout de savoir si c'est bien la même typo qui est utilisé par les navigateurs (font-family dans le CSS) et que cette typographie est bien installée sur chaque ordinateur (pour cette raison il est préférable de recourir à une typo généralement installée nativement sur les deux systèmes).
Dans le cas d'une typographie qui ne serait pas présente nativement sur l'un des deux (voir les deux) système, il faudra recourir à la directive CSS3 @font-face. MAis là aussi attention car cette directive n'est reconnue que dans les navigateurs récents (FF 3.5+, IE9, Safari 3.1+, Chrome, Opera 10+...)

Dans tous les cas, en raison du premier point évoqué, le rendu ne sera jamais parfaitement identique d'un système à l'autre. Il faut donc en prendre compte pour que la mise en page s'adapte bien à cette contrainte.

moust a écrit :
Les question à se poser sont surtout de savoir si c'est bien la même typo qui est utilisé par les navigateurs (font-family dans le CSS) et ...

C'est donc bien ce que j'écrivais : "La police utilisée est-elle valable et sur PC, et sur Mac ? "
Modifié par lddsoft (21 Mar 2011 - 19:55)

Hmm, ça sent le Game Over ça.

Ralf a écrit :
J'ai fait une copie d'écran de la version PC, que j'ai superposée à la version Mac, et tout est (horizontalement du moins) identique, sauf le texte dans mon menu, qui est nettement plus "large" sur Mac. Je n'arrive pas à savoir si c'est la taille du texte qui est supérieure, ou la graisse, ou l'interlettrage... mais quelque chose ne vas pas !
Le problème, c'est que comme il s'agit d'un menu horizontal, réglé au pixel près, il part en vrac sur Mac, et mon site avec.

C'était inévitable:

1. Le lissage des fontes est différent selon les systèmes d'exploitation, les versions des systèmes d'exploitation, voire les navigateurs. Typiquement, une police optimisée pour l'écran type Arial ou Verdana sera pas ou peu lissée (avec un hinting très fort) sur Windows XP, mais peut être beaucoup plus lissée avec moins de hinting sous Linux, OS X, mais aussi Windows 7, sous IE9, etc. Dans ces derniers cas le texte aura tendance à apparaitre légèrement plus gras, et à prendre plus de place en largeur.
2. Le navigateur peut à tout moment, pour une raison X ou Y, utiliser une fonte différente de celle souhaitée. Et la fonte utilisée peut être plus large que celle souhaitée.
3. L'utilisateur peut à tout moment augmenter la taille du texte.

Si tu n'as pas A) prévu un peu de marge pour ta ligne de menu et B) prévu et géré le cas où les items de menu passent sur deux lignes (ce qui devrait rester utilisable, même si pas graphiquement idéal), alors Game Over, t'as plus qu'à recommencer le level «Webdesign» depuis le début.

moust a écrit :
Les question à se poser sont surtout de savoir si c'est bien la même typo qui est utilisé par les navigateurs

Non. La bonne question c'est de savoir ce qui a été prévu pour gérer le cas de figure inévitable où ça dépasse. Comment ça se comporte dans ce cas? Comment c'est géré dans le design, et en code dans l'intégration?

Le reste on s'en fiche.
Modifié par fvsch (22 Mar 2011 - 00:01)

lddsoft -> Je ne faisait qu'étayer ta réponse par quelques détails supplémentaires.

fvsch -> C'est en gros la conclusion que je donne à la fin de ma réponse. La question de savoir si c'est bien la bonne typo qui s'applique est la première étape du questionnement pour limiter les variations dans un premier temps.
Sachant que la question de base portait sur la différence de rendu entre Mac et PC.
Mais en effet, quand on s'attarde sur la construction du menu en question on voit bien que dans tous les cas ça posera problème pas à cause du dimensionnement stricte des blocks.

Bonjour,

Puisque le pb semblait insoluble, j'ai reconstruit mon menu différemment. Enfin j'ai juste interverti deux trucs, ça a pas été bien long.

J'ai remplacé les padding gauche et droite des liens de mon menu (puisque le texte plus ou moins graissé sur mac "écartait" d'autant les bords) par une largeur fixe à ces liens.
J'aime moins, parce que tous les liens ont la même largeur, quelle que soit la taille du texte, mais au moins aucun risque que ça parte en vrac. D'ailleurs je viens de vérifier sur Mac, le texte est toujours plus épais que sur PC, mais s'intégre tout de même sans causer de ravages

Merci à tous !


PS : pour répondre à la question, mon texte était dans un arial bête et méchant.
Modifié par Ralf (22 Mar 2011 - 11:13)