Taille de la police en CSS -% ou em?

Question

Lors de la définition de la taille des polices dans CSS, dois-je utiliser une valeur en pourcentage (% ) ou em ? Pouvez-vous expliquer l'avantage?

Answer 1

Il existe un très bon article sur la typographie Web dans Une liste à part .

Leur conclusion:

  

Dimensionnement du texte et de la hauteur de ligne dans ems,   avec un pourcentage spécifié sur le   corps (et une mise en garde facultative pour   Safari 2), a été montré pour fournir   texte précis et redimensionnable dans tous les   navigateurs d'usage courant aujourd'hui. C'est   une technique que vous pouvez mettre dans votre kit   sac et utiliser comme une meilleure pratique pour   redimensionner le texte en CSS qui satisfait à la fois   designers et lecteurs.

Answer 2

De http://archivist.incutio.com/viewlist/css-discuss/1408

  

%: certains navigateurs ne gèrent pas   pour cent pour la taille de la police, mais interprète   150% comme 150px. (Quelques versions NN4,   par exemple.) IE a aussi des problèmes   avec pour cent sur les éléments imbriqués. Il   semble IE utilise pour cent par rapport à   fenêtre d'affichage au lieu de relative à   élément parent. Encore un autre problème   (bien que correct selon le W3C   specs), dans Moz / Ns6, vous ne pouvez pas utiliser   pour cent par rapport aux éléments sans   hauteur / largeur spécifiée.

     

em: Parfois, les navigateurs utilisent le mauvais   taille de référence, mais du relatif   unités c'est celle avec le moins   problèmes. Vous pourriez le trouver   interprété comme px parfois si.

     

pt: diffère grandement entre   résolutions, et ne doit pas être utilisé   pour l'affichage. C'est assez sûr pour   imprimer utiliser si.

     

px: La seule unité absolue fiable sur   écran. C'est peut-être à tort   interprété dans la presse cependant, comme un   Le point consiste généralement en plusieurs   pixels, et ainsi tout devient   ridiculement petit.   

Answer 3

Les deux ajustent la taille de la police par rapport à ce qu’elle était. 1,5em équivaut à 150%. Le seul avantage semble être la lisibilité, choisissez celle avec laquelle vous êtes le plus à l'aise.

Answer 4

Etant donné que (presque?) tous les navigateurs redimensionnent maintenant la page dans son ensemble, plutôt que simplement le texte, problèmes précédents avec px vs % vs em en termes de redimensionnement des polices accessibles sont plutôt discutables.

La réponse est donc que cela n’a probablement aucune importance. Utilisez ce qui vous convient.

  

% est intéressant car il permet un redimensionnement relatif.

     

px est pratique car il est relativement 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 permet un dimensionnement proportionnel lié à la taille du texte.

Answer 5

La vraie différence apparaît lorsque vous ne l'utilisez pas pour les tailles de police. 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 la police, à la largeur, à la hauteur et probablement à d'autres choses que je ne connais pas.

Answer 6

Concernant la différence entre les unités css % et em .

Pour autant que je sache (du 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 avec < code> 100 puis remplacez em par % , cela devrait être la même chose?

S'il existe réellement une différence réelle entre em et%, alors quelqu'un peut-il l'expliquer (ou fournir un lien vers une explication)?

(Je voulais ajouter mon commentaire à l'endroit auquel il appartiendrait, c'est-à-dire mis en retrait juste en dessous de la réponse de "Liam", a répondu le 25 sept. 08 à 11: 21 ", car je souhaite également Je ne sais pas pourquoi sa réponse a été rejetée, mais je ne savais pas comment y mettre mon commentaire et je devais donc écrire cette réponse "thread global".

Answer 7

Comme l’indique la langue norvégienne, px est le logiciel le plus fiable pour la typographie Web, car tout ce que vous faites sur la page est principalement présenté par rapport à un écran d’ordinateur. Le problème des tailles absolues est que certains navigateurs (IE) ne redimensionnent pas les éléments de valeur en pixels sur une page Web. Par conséquent, lorsque vous essayez de zoomer , tout s'ajuste à l'exception de ces éléments.

Je ne sais pas si IE8 gère cela correctement, mais tous les autres éditeurs de navigateurs gèrent parfaitement les pixels et il est encore peu courant qu'un utilisateur doive agrandir / réduire le texte (cette zone de texte sur SO est peut-être l'exception). Si vous voulez vraiment vous salir, vous pouvez toujours ajouter une fonction javascript pour agrandir la taille de votre texte et proposer un paramètre "petit" / "plus grand". bouton à l'utilisateur.

Answer 8

bibliothèque de l'interface utilisateur Yahoo ( http://developer.yahoo.com/yui/ ) a un bel ensemble de classes de base css utilisées pour" réinitialiser ". les paramètres spécifiques du navigateur afin que la base d'affichage du site soit la même pour tous les navigateurs (pris en charge).

Avec YUI, on est supposé utiliser des pourcentages.