Taille de la police dans CSS - % ou em?
pour définir la taille des polices dans CSS, devrais-je utiliser une valeur en pourcentage ( %
) ou em
? Pouvez-vous expliquer l'avantage?
8 réponses
il y a un très bon article sur la typographie web sur A List Apart .
leur conclusion:
Taille du texte et hauteur de la ligne en ems, avec un pourcentage spécifié sur l' corps (et une mise en garde optionnelle pour Safari 2), s'est avéré fournir texte précis et redimensionnable sur tous les les navigateurs couramment utilisés aujourd'hui. C'est une technique que vous pouvez mettre dans votre trousse sac et l'utiliser comme une meilleure pratique pour dimensionnement texte en CSS qui satisfait à la fois les concepteurs et les lecteurs.
de http://archivist.incutio.com/viewlist/css-discuss/1408
%: Certains navigateurs ne gèrent pas pourcentage pour la taille de la police mais l'interprétation 150% 150 px. (Quelques versions NN4, par exemple.) IE a également des problèmes avec un pourcentage sur les éléments imbriqués. Il il semble que IE utilise le pourcentage par rapport à viewport au lieu de relatif à élément parent. Encore un autre problème (bien que correcte selon le W3C les specs), dans Moz / Ns6, vous ne pouvez pas utiliser pourcentage par rapport aux éléments sans spécifié hauteur/largeur.
em: parfois les navigateurs utilisent le mauvais taille de référence, mais de la relative les unités c'est celui avec le moins problème. Vous trouverez peut-être interprété comme px parfois.
pt: diffère considérablement entre les résolutions, et ne doit pas être utilisé pour l'affichage. C'est tout à fait sûr pour l'utilisation d'impression.
px: le seul unité absolue fiable sur écran. Il peut être à tort interprété dans la presse cependant, comme un le point se compose habituellement de plusieurs pixels, et ainsi, tout devient ridiculement petit.
ajustent tous les deux la taille de la police par rapport à ce qu'elle était. 1.5 em est le même que 150%. Le seul avantage semble être la lisibilité, choisissez celui qui vous est le plus confortable.
étant donné que (presque?) tous les navigateurs redimensionnent maintenant la page dans son ensemble, plutôt que seulement le texte, les problèmes antérieurs avec px
vs. %
vs. em
s en termes de redimensionnement de police accessible sont plutôt sans objet.
donc, la réponse est que cela n'a probablement pas d'importance. Utilisez ce qui vous convient.
%
est intéressante parce qu'elle permet une relative redimensionnement.
px
est agréable parce qu'il est assez facile de gérer les attentes lors de son utilisation.
em
peut être utile lorsqu'il est également utilisé pour les éléments de mise en page, car il peut permettre un dimensionnement proportionnel en fonction de la taille du texte.
La vraie différence est apparente lorsque vous l'utilisez pas pour les polices. Définir un padding
de 1em
n'est pas la même chose que 100%
. em
est toujours relatif à la taille de la police. Mais %
pourrait être relatif à la taille de police, la largeur, la hauteur et probablement d'autres choses que je ne sais pas.
concernant la différence entre les unités css %
et em
.
pour autant que je comprenne (au moins théoriquement/conceptuellement, mais peut-être pas comment ces deux unités pourraient être implémentées dans les navigateurs) ces deux unités sont équivalentes, c'est-à-dire que si vous multipliez votre valeur em
par 100
et que vous remplacez ensuite em
par %
, cela devrait être la même chose ?
S'il y a réellement une différence entre em et % alors quelqu'un peut m'expliquer (ou fournir un lien vers une explication) ?
(j'ai voulu ajouter ce commentaire de la mienne où il devrait appartenir, c.-à-d. indenté juste au-dessous de la réponse par "Liam, answered Sep 25 '08 at 11:21"
puisque je veux aussi savoir pourquoi sa réponse a été rétrogradée, mais je ne pouvais pas comprendre comment mettre mon commentaire là-bas et donc a dû écrire cette réponse" fil global")
comme Galwegian le mentionne, px est le plus fiable pour la typographie sur le web, car tout le reste que vous faites sur la page est principalement en référence à un écran d'ordinateur. Le problème avec les tailles absolues est que certains navigateurs (IE) ne sera pas échelle pixel-éléments de valeur sur une page web, donc quand vous essayez de zoom entrée/sortie, tout ajuste sauf pour ces éléments.
Je ne sais pas si IE8 gère cela correctement, mais tous d'autres fournisseurs de navigateur manipulent des pixels juste fine et il est encore un cas minoritaire où un utilisateur doit agrandir/diminuer le texte (cette zone de texte sur donc peut-être être l'exception). Si vous souhaitez obtenir vraiment sales, vous pouvez toujours ajouter une fonction javascript pour rendre votre texte plus grande taille et d'offrir un "petit"/"plus" pour l'utilisateur.
Bibliothèque D'Interface utilisateur Yahoo ( http://developer.yahoo.com/yui / ) a un bel ensemble de classes de base css utilisés pour" réinitialiser " les paramètres spécifiques du navigateur de sorte que la base pour l'affichage du site est la même pour tous les navigateurs (pris en charge).
avec YUI on est censé utiliser des pourcentages.