28106 sujets

CSS et mise en forme, CSS3

En arial 10px, je ne vois pas le gras sur firefox, au contraire de ie(!)
Est-ce un bug firefox? car avec verdana pas de pb

Merci

Bienf

.strong {font: bold 10px arial;}
Salut,

ben si, ça passe aussi avec Firefox Smiley rolleyes ... ton code html ressemble bien à quelque chose comme ça ?
<span class="strong">Du texte.</span>
Salut Smiley cligne ,

c'est bien en gras chez moi... Mais d'après Firebug il ne s'agit pas d'Arial Smiley rolleyes :
courrier,Helvetica,sans-serif
D'ailleurs je ne suis pas sûr que courrier existe : n'est-ce pas plutôt courier Smiley langue ?
Bonjour,

Chez moi ce n'est pas en gras mais c'est sans doute à cause de la taille du texte qui est trop petit. C'est peut être pour cette raison que tu ne vois pas la différence entre bold ou non.

J'avais eu aussi de se probleme.
Bon, ça n'est pas un problème de CSS. C'est juste la conséquence d'un texte trop petit pour être affiché en gras sans lissage des caractères.

Pour être précis: sous Windows XP, sans lissage des caractères, le Arial bold en corps 10px est affiché comme du Arial regular 10px. Bref, c'est pas gras.
Démonstration:
upload/2043-bold10px-st.png

À l'inverse, avec un lissage des caractères ClearType, même les caractères les plus petits sont lissés (ce qui donne quelque chose de pas toujours très lisible pour les petits textes), et on a donc bien du texte en gras.
Démonstration:
upload/2043-bold10px-cl.png

Sous Windows XP, Firefox utilise les fonctionnalités du système pour le lissage des caractères, de même que IE6. IE7 par contre utilise un lissage de type ClearType (ou équivalent), même si ça ne correspond pas aux préférences du système.

Solution: pas de solution. Tu ne peux pas forcer l'utilisateur à activer le lissage des caractères, et encore moins à utiliser ClearType.
À vrai dire, la seule vraie solution consisterait à... éviter d'utiliser du texte en Arial 10px (franchement, niveau lisibilité c'est très moyen).


Au passage, et même si ça n'a rien à voir, tu as un problème avec les images en PNG transparent de ton menu: IE6 ne supportant pas la transparence graduelle du PNG-24, il affiche les images du menu avec un fond gris. Ça se résoudra facilement... en utilisant des images opaques ou du PNG-8 ou du GIF (sur fond uni, pas besoin de transparence graduelle).

Autre chose: il faudrait que tu travailles l'accessibilité de tes images, notamment celles du menu et de l'en-tête. Si je désactive les images, je ne peux plus naviguer sur le site et je perds des informations sur la page. Il faut garder à l'esprit que certains utilisateurs ne verront pas les images (pour différentes raisons pas toujours prévisibles), et que les moteurs de recherche ne les voient pas non plus.
POur un letter-spacing, comme mesure n'a-t-il que, par ex. 12px, ou -0.2em
Peut-on écrire 0.05em ou -0.05em? Peut-on mettre des % ???

Autrement dit peut-on trouver une valeur intermédiaire entre 0 et 1px, vu que verdana est plus large qu'arial ?

Merci.
Bienf a écrit :
Peut-on écrire 0.05em ou -0.05em?

Oui, mais pas sûr que les navigateurs n'arrondissent pas les valeurs au pixel correspondant. Ça ne semble pas être le cas de Firefox, mais c'est à voir pour les autres.

Bienf a écrit :
Peut-on mettre des % ???

À priori non.

Bienf a écrit :
Autrement dit peut-on trouver une valeur intermédiaire entre 0 et 1px, vu que verdana est plus large qu'arial ?

Le «vu que Verdana est plus large qu'Arial» me laisse sans voix. Quel est le but de la manoeuvre exactement? Corriger de l'Arial pour que ça ressemble à du Verdana ou inversement?
Non, c'est juste pour que ma mise en page reste celle que j'avais prévu, car avec le verdana mes paragraphes sont plus grands et dépassent l'alignement vertical, avec mes images en float à gauche puis plus bas à droite.

Bref je trouvais que le verdana avait un espacement de lettres peu lisible si le ClearType n'est pas activé