28173 sujets

CSS et mise en forme, CSS3

Régler précisément la taille des polices

Bonjour à tous,

j'essaie de régler la taille de mes polices, en utilisant comme il se doit les unités relatives.

Cependant le résultat ne me satisfait pas car, que cela soit en em ou en %, je n'arrive pas à la précision que je recherche, l'écart d'une valeur à une autre étant trop important.

J'ai essayé de mettre des décimales, genre 1.35 em mais cela ne fonctionne pas.

Sauriez-vous comment faire ?
Bien entendu, le texte restera lisible si l'utilisateur agrandit ou rétrécit la taille du texte, mais je souhaite quand même, pour des raisons esthétiques, parvenir à un niveau de précision élevé quant à la taille du texte par défaut...
Hello,

Comme tout le monde n'est pas devin, je te rappelle l'une des Règles que tu as dû survoler trop vite Smiley cligne :
Règle 13 a écrit :
Enfin, n'hésitez pas à toujours fournir une image explicative et une url où les membres auront un aperçu de votre problème. La règle est simple : il faut toujours donner un maximum de détails pour être sûr d'avoir une chance que les autres comprennent et aident.


Ce que je peux te dire, c'est que si tu fixes ta taille de police globale en unité relative (em ou %), selon le navigateur les arrondis peuvent être géré différemment. Par exemple Opera a tendance à afficher les polices un peu plus petite à un certain poucentage. La solution est alors de trouver le chiffre exact qui conviennent pour harmoniser la taille d'un navigateur à l'autre.
Modifié par Hermann (26 Jul 2007 - 11:42)
Hermann a écrit :
Hello,

Comme tout le monde n'est pas devin, je te rappelle l'une des Règles que tu as dû survoler trop vite Smiley cligne :


Ce que je peux te dire, c'est que si tu fixes ta taille de police globale en unité relative (em ou %), selon le navigateur les arrondis peuvent être géré différemment. Par exemple Opera a tendance à afficher les polices un peu plus petite à un certain poucentage. La solution est alors de trouver le chiffre exact qui conviennent pour harmoniser la taille d'un navigateur à l'autre.


Merci pour le début d'aide...
Je ne peux que difficilement être plus précis...

Pour faire simple :
1.3em = trop petit
1.4em = trop grand

150% = 151% = 152% = 153% = 154% = trop petit
155% = 156% = 157% = 158% = 159 % = trop grand

Je remarque effectivement que les navigateurs arrondissent la valeur finale et que cela peut produire un écart important sans que j'arrive à régler ceci finement Smiley decu
Déjà essaye avec des pixels, ce sera plus simple, style :
p {
  font-size: 14px;
}


Une fois que t'as trouvé la taille que tu veux, convertit en em, en prenant comme base 16 px. Donc pour 14 px, tu te retrouves avec 16/14 em :
p {
  font-size: 1.143em;
}
Je trouve dommage de passer son temps à calculer à partir des pixels. Mais bon...

Noisequik a écrit :
J'ai essayé de mettre des décimales, genre 1.35 em mais cela ne fonctionne pas.

C'est à dire? Ça ne change rien par rapport à 1.4em ou 1.3em?
Attention au passage à ne pas mettre d'espace entre la valeur et l'unité! Smiley cligne

Pour la question des arrondis: il me semble que les navigateurs arrondissent souvent, pour la plupart d'entre eux, à une valeur en pixels. Donc si tu veux du 13.5px parce que ni le 13px ni le 14px ne te conviennent, ça va être difficile. Les navigateurs sont encore loin des possibilités des logiciels de graphisme et PAO.
Alors effectivement, la conversion de pixels ne me sert à rien car je souhaiterais qqch du genre 14.3px Smiley decu

Le navigateur semble tout convertir en pixel et donc, je ne pourrais pas être plus précis que cette unité, ce que je trouve un peu dommage vu que l'on a des unités en em ou pour cent qui permettraient de donner des valeurs très précises...

D'ailleurs un pixel de différence sur toute une ligne se remarque assez, je trouve...
Noisequik a écrit :
car je souhaiterais qqch du genre 14.3px Smiley decu

Tu n'obtiendras pas ce type de précision.

Noisequik a écrit :
ce que je trouve un peu dommage vu que l'on a des unités en em ou pour cent qui permettraient de donner des valeurs très précises...

Tu peux faire ça aussi avec des px, si tu veux:
font-size: 13.14159265358979323846264338327950288419716939937510px;

Mais ça ne changera pas grand chose... arrondi à 13px pour tous les navigateurs.

Par contre, je viens de tester un peu en profondeur et les arrondis fonctionnent assez différemment d'un navigateur à l'autre. Voir les tableaux de résultats sur cette page de test:
http://web.covertprestige.info/test/24-arrondi-taille-du-texte.html
Sujet clos
Aller à