EM pour hauteur de ligne
Je voudrais convertir mon nouveau site Web de pixels en ems. Ma question est, dois-je également appliquer des ems à ma propriété de hauteur de ligne de texte?
En supposant que "convertir en ems" signifie utiliser l'unité em pour font-size, vous devez définir line-height d'une manière qui s'adapte également à la taille de la police. Les deux propriétés sont étroitement liées et si vous définissez l'une d'entre elles dans em et l'autre (par exemple) dans px ou pt, la page se cassera si la police la taille est modifiée. Cela irait donc à l'encontre de l'idée même d '"utiliser des em" pour utiliser des unités essentiellement différentes pour des propriétés essentiellement connectées.
Par exemple, si vous définissez font-size: 1.5em et line-height: 18px, alors les choses dépendront de la taille de la police du parent de l'élément et peuvent mal tourner si cette taille est beaucoup plus petite ou beaucoup plus grande que prévu.
Que vous utilisiez l'unité em ou un nombre pur est un problème différent. En utilisant juste un nombre, comme dans line-height: 1.2, équivaut principalement à utiliser l'unité em, comme dans line-height: 1.2em. Mais il y a la différence que lorsque line-height est hérité, c'est le nombre pur qui est hérité, pas la valeur calculée.
Par exemple, si un élément interne a deux fois la taille de police de son parent, la valeur héritée 1.2 signifie que 1,2 fois sa propre taille de police est utilisée, ce qui est OK. Mais si le parent avait line-height: 1.2em, l'enfant hériterait alors d'une valeur 1,2 fois supérieure à la taille de police du parent, ce qui est beaucoup plus petit que sa propre taille de police.
pour plus d'exemples de fin d'explication, voir line-height @ Mozilla Developer Network
line-height peut être défini dans px, em, chaque unité s'adaptera.
line-height fonctionne mieux et à l'épreuve du temps si vous utilisez un facteur/multiplicateur, ce qui signifie aucune unité, mais uniquement un nombre qui multiplie la taille de votre police.
.foo {
font-size: 1.3em; /* based that 1em == 10px */
line-height: 1.3; /* 16.9px line-height */
}
Donc, oui, vous pouvez, pour répondre à votre question: non, vous ne devriez pas.
optez simplement pour que la hauteur de ligne basée sur un facteur soit à l'épreuve du temps.
Il est recommandé d'utiliser le numéro sans unité pour la hauteur de ligne (pour éviter les problèmes d'héritage). La hauteur de ligne calculée sera alors le produit de la valeur sans unité multipliée par la taille de police de l'élément .
Il peut être plus pratique d'utiliser le raccourci CSS font, comme ceci (exemple tiré des documents CSS de Mozilla):
div { font: 10pt/1.2 Georgia,"Bitstream Charter",serif }
Un bon exemple de la raison pour laquelle la valeur sans unité est préférable est donné ici: Préférez les nombres sans unité pour les valeurs de hauteur de ligne .