28172 sujets

CSS et mise en forme, CSS3

Rendu de font-family : monospace; inégale

Bonjour,

Je cherche un moyen pour obtenir un rendu similaire de font-family : monospace; dans tout les navigateurs.

Le rendu de firefox me convient bien, mais par exemple dans konqueror j'obtiens une font beaucoup plus large et ça me plait moins. Voici une image de ce que ça donne :

http://87.98.177.157/goldy/rendu_web.png

J'ai trouvé des articles sur internet traitant de ce problème, mais ils expliquent plus qu'il s'agit d'un bug de firefox et donc comment obtenir les rendu plus larges. Moi je cherche justement à obtenir le rendu de firefox partout si possible.

Si vous avez une idée à me suggérer, merci d'avance.
Ajouté font-size: 12px; semble avoir suffit dans le cas de ces deux navigateurs, même si la font utilisé n'est pas la même, ça ira bien.
Hello,

Dans l'absolu il faudrait éviter de donner des tailles de texte en pixels (ce n'est en tout cas pas recommandé, voire sanctionné, par les référentiels Accessiweb et RGAA), et il faudrait utiliser uniquement des tailles de texte relatives, en EM ou pourcentages.

Ceci dit, ce point particulier des fontes monospace peut être difficile à gérer sans passer par des pixels. Donc on ne te jètera pas la pierre. Smiley cligne

Je crois que le problème vient du fait que certains navigateurs ont une taille de texte par défaut pour le texte «normal», et une différente pour le texte «à chasse fixe» (ou monospace). Par exemple, sur le navigateur que j'utilise pour écrire ce message (Firefox 3.6 sur Mac), j'ai une taille de texte par défaut de 16px pour le texte courant et de 13px pour les fontes à chasse fixe. Du moins c'est ce qui est annoncé dans les préférences de Firefox, mais ça n'est pas tout à fait ça.

En effet, il ne suffit pas de déclarer un font-family:monospace pour que la taille à 13px s'applique. En réalité, Firefox va l'appliquer non pas à un type de fonte, mais à une série d'éléments: TEXTAREA, PRE, etc.

Il se peut que certains navigateurs agissent de la même manière (ce serait à rechercher ou tester). Quoi qu'il en soit, une solution simple consiste à demander, pour ces éléments, à utiliser la taille de texte du parent. Ce qui peut donner:
textarea {
  font-size: 100%;
}

Autre possibilité et autre exemple:
pre {
  font-size: inherit;
}
Florent V. a écrit :
Hello,

Dans l'absolu il faudrait éviter de donner des tailles de texte en pixels (ce n'est en tout cas pas recommandé, voire sanctionné, par les référentiels Accessiweb et RGAA), et il faudrait utiliser uniquement des tailles de texte relatives, en EM ou pourcentages.



Je prends note de ça, mais je ne comprends pas trop le problème que cela pose d'un point de vue accessibilité. Cela empêche les navigateurs utilisant un grossissement de taille des fonts de fonctionner correctement ?

Je l'utilise assez rarement car les résultats sont parfois assez aléatoires (par exemple là où on aura un bon rendu avec de petites valeurs sous linux, un firefox windows n'affichera qu'un amas de pixel illisible). Mais sinon je pense que cela peut-être utile pour les plus grand affichage et calibrer correctement la taille d'une font par rapport à un élément de la page.
Sujet clos
Aller à