Taille de la police en CSS -% ou em?

112

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

css fonts font-size

— Tapis
source

1

À mon avis, en 2016, il n'y a pas de différence entre em et%. Si je saisis 1.2 em, tous les navigateurs modernes pensent que j'ai utilisé 120% et par exemple si j'utilise 0.7 em, tous les navigateurs modernes pensent que j'ai utilisé 70% ... C'est ce que j'ai vécu en CSS

— Mahdi Jazini

79

Il y a un très bon article sur la typographie Web sur A List Apart .

Leur conclusion:

Le dimensionnement du texte et de la hauteur de ligne en ems, avec un pourcentage spécifié sur le corps (et une mise en garde facultative pour Safari 2), s'est avéré fournir un texte précis et redimensionnable sur tous les navigateurs couramment utilisés aujourd'hui. C'est une technique que vous pouvez mettre dans votre sac de kit et utiliser comme meilleure pratique pour dimensionner le texte en CSS qui satisfait à la fois les concepteurs et les lecteurs.

— Glenn Slaven
source

29

En fait, ils line-heightssont mieux écrits sans aucune unité. Ceci est autorisé par la spécification, et évite complètement certaines bizarreries vraiment ennuyeuses du navigateur en ce qui concerne les emhauteurs de ligne basées sur les lignes

— Már Örlygsson

16

Je veux informer les gens que cet article date de 2007. Depuis lors, les navigateurs modernes sont devenus plus courants et les navigateurs modernes effectuent généralement un zoom avant au lieu d'augmenter la taille de la police par défaut. Pour cette raison, «px» est devenu plus courant et à mon avis une meilleure approche. Bien sûr, cela est discutable, mais j'ai personnellement rencontré des problèmes dans des projets en raison de leur imbrication.

— Mohag519

5

@ Mohag519 la nidification des em est un piège dangereux. :)

— Vishnudev K

@ Mohag519 ne va-t-il pas vous donner quelque chose de beaucoup plus petit que prévu avec les appareils mobiles qui ont une densité de pixels élevée? Je ne pense pas que nous voulons que nos sites soient exactement comme des ordinateurs de bureau, mais super minuscules sur mobile;)

— johnb003

@ johnb003 Ces appareils mobiles ont un ratio de pixels de périphérique supérieur à 1. Par exemple, l'iPhone 4 a une largeur d'écran physique de 640px, mais apparaît comme 320 pixels "CSS" (DPR = 2). Le site Web ne semble donc pas plus petit!

— Benjamin le

14

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

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

em: Parfois, les navigateurs utilisent la mauvaise taille de référence, mais des unités relatives, c'est celle qui pose le moins de problèmes. Vous pourriez le trouver parfois interprété comme px.

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 une utilisation imprimée.

px: La seule unité absolue fiable à l'écran. Il peut cependant être mal interprété dans l'impression, car un point se compose généralement de plusieurs pixels, et ainsi tout devient ridiculement petit.

— Galvégien
source

À propos de la chose pt. J'ai eu un excellent argument sur /. à ce sujet (et perdu). J'avais le même point de vue que toi, c'est bon de savoir que quelqu'un partage ce point de vue :)

— Vincent McNabb

12

Êtes-vous vraiment en train de dire que certains utilisateurs de Netscape Navigator 4 pourraient ne pas pouvoir afficher correctement ma page si j'utilise des pourcentages pour les tailles de police?

— débutant

4

La discussion citée date de 2002. Est-ce toujours d'actualité? Y a-t-il des navigateurs en cours d'utilisation avec em ou% bugs?

— Beni Cherniavsky-Paskin

1

Citer des bogues vieux de 20 ans dans les navigateurs n'est pas une réponse utile.

— d512

7

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 celui avec lequel vous êtes le plus à l'aise.

— Liam
source

Quelqu'un peut-il m'expliquer pourquoi cela est rejeté? C'est exactement ainsi que j'ai compris la différence entre em et pourcentage. Il n'y a aucun avantage de nos jours à utiliser l'un par rapport à l'autre. L'important est que vous utilisiez une taille relative à une taille de police de base.

— Lee Theobald

1

Merci Lee, je viens de tester cela dans IE6, IE7, Firefox 3, Safari 3, Opera 9.5 et Google Chrome, tous sous Windows et ils me semblent tous identiques! <p style = "font-size: 0.6em;"> ceci est un test </p> <p style = "font-size: 60%;"> ceci est un test </p>

— Liam

7

La vraie différence apparaît lorsque vous ne l'utilisez pas pour les tailles de police. Le réglage a paddingde 1emn'est pas le même que 100%. emest toujours relative à la taille de la police. Mais cela %peut être relatif à la taille de la police, à la largeur, à la hauteur et probablement à d'autres choses que je ne sais pas.

— Björn Tantau
source

5

Étant donné que (presque?) Tous les navigateurs redimensionnent désormais la page dans son ensemble, plutôt que simplement le texte, les problèmes précédents avec pxvs %vs ems en termes de redimensionnement de police accessible sont plutôt discutables.

Donc, la réponse est que cela n'a probablement pas d'importance. Utilisez ce qui fonctionne pour vous.

% est bien car il permet un redimensionnement relatif.

px c'est bien car 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 une taille proportionnelle liée à la taille du texte.

— DA.
source

Réponse trompeuse, en particulier pour ceux qui ne connaissent pas grand-chose au CSS en premier lieu. Indépendamment du fait que CSS définit les pixels logiques, ce qui était une idée terrible basée sur une décision sans aucun doute hâtive de s'adapter à l'assaut des appareils mobiles compatibles CSS il y a dix ans, les pixels sont entièrement à la discrétion des navigateurs et des utilisateurs en ce qui concerne la taille de police par défaut. , au moins. En plus de cela, nous avons maintenant des rapports d'aspect d'écran très différents (et pas toujours des appareils avec un écran) et des résolutions allant de 240p à 2400p. Utiliser des pixels en CSS sans JavaScript est presque inutile.

— amn

@amn eh bien, notez que cette réponse a 8 ans. C'est un temps LONG dans le temps d'Internet. Cela dit, les pixels sont toujours bons sinon idéaux. La plupart (tous?) Des navigateurs acceptent le dimensionnement des polices de pixels de manière adéquate sur l'appareil particulier. Aujourd'hui, cependant, j'utiliserais généralement rem comme unité de mesure.

— DA.

Il me manque peut-être quelque chose, mais quel avantage, le cas échéant, a-t-il avec les longueurs de pixels? Pourquoi sont-ils «bien» ou «idéaux»? Versus em, par exemple. À part cela, je pense que les réponses sur les SO devraient s'efforcer d'être intemporelles - c'est une base de connaissances après tout. Wikipédia de la programmation :) Comme Wikipédia est mis à jour pour refléter les faits, SO devrait répondre, à mon humble avis.

— amn

@amn Je n'ai pas dit qu'ils étaient idéaux ou avaient un réel avantage majeur. Je répondais juste à la question des OP. Quant à vous efforcer d'être intemporel, si vous pouvez prédire l'avenir du Web dans 8 ans, plus de pouvoir pour vous! Mais je n'ai pas le temps de mettre à jour constamment la valeur d'une décennie de mes réponses ici. Espérons que les gens en savent assez pour regarder l'horodatage des réponses et en tenir compte.

— DA.

0

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

Autant que je sache (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 emvaleur par 100puis la remplacez empar %elle devrait être la même chose?

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

(Je voulais ajouter ce commentaire à ma place, c'est-à-dire en retrait juste en dessous de la réponse "Liam, answered Sep 25 '08 at 11:21"car je veux aussi savoir pourquoi sa réponse a été rejetée, mais je ne savais pas comment y mettre mon commentaire et j'ai donc dû écrire cette réponse "thread global")

— user743436
source

-1

Comme le mentionne Galwegian, px est le plus fiable pour la typographie Web, car tout ce que vous faites sur la page est principalement présenté en référence à un écran d'ordinateur. Le problème avec les tailles absolues est que certains navigateurs (IE) ne mettent pas à l'échelle les éléments de valeur en pixels sur une page Web, donc lorsque vous essayez de zoomer / dézoomer, tout s'ajuste à l'exception de ces éléments.

Je ne sais pas si IE8 gère cela correctement, mais tous les autres fournisseurs de navigateurs gèrent très bien les pixels et c'est encore un cas minoritaire où un utilisateur doit agrandir / diminuer le texte (cette zone de texte sur SO étant peut-être l'exception). Si vous voulez être vraiment sale, vous pouvez toujours ajouter une fonction javascript pour agrandir la taille de votre texte et offrir un bouton "petit" / "plus grand" à l'utilisateur.

— Christian P.
source

1

IE7 met à l'échelle les valeurs de pixel correctement, si vous utilisez le zoom. IE6 n'avait pas de zoom, seulement la taille du texte. Le zoom est devenu une exigence en raison des concepteurs qui ont utilisé des échelles de pixels fixes plutôt que de permettre à la page de se redéfinir avec les changements de taille du texte.

— Mike Dimmick

C'est toujours un problème avec IE6, mais, encore une fois, TOUT est toujours un problème avec IE6. Bien que j'évitais le px dans le passé à cause de cela, le concept de zoom de page Web dans son ensemble (par rapport au texte) est devenu standard et je me suis retrouvé à utiliser px beaucoup plus souvent.

— DA.

-1

La bibliothèque d'interface utilisateur Yahoo ( http://developer.yahoo.com/yui/ ) a un bel ensemble de classes css de base 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 (pris en charge) navigateurs.

Avec YUI, on est censé utiliser des pourcentages.

— kosoant
source

J'ai utilisé la réinitialisation YUI, mais je me suis ensuite rendu compte que les paramètres de taille du texte des navigateurs NE FONCTIONNENT PAS! Ne voyez aucun intérêt à utiliser% si vous avez défini px sur le corps car il rompt les paramètres de taille du texte.

— Jason