css - texto - EM para altura de linea

style line height html

Question

Me gustaría convertir mi nuevo sitio web de píxeles a ems. Mi pregunta es, ¿también debo aplicar ems a mi propiedad de altura de línea de texto?

Answer 1

Puedes probar line-height:1.3 !important;

Answer 2

Se recomienda utilizar el número sin unidad para la altura de línea (para evitar problemas de herencia). La altura de línea calculada será entonces el producto del valor sin unidades multiplicado por el tamaño de fuente del elemento .

Puede ser más conveniente usar el acceso directo de font CSS, así (ejemplo tomado de la documentación de Mozilla CSS):

div { font: 10pt/1.2  Georgia,"Bitstream Charter",serif }

Un buen ejemplo de por qué es preferible el valor sin unidades es el siguiente: Prefiera números sin unidades para valores de altura de línea .

Answer 3

Suponiendo que "convertir a ems" significa usar la unidad em para font-size de font-size , entonces debe establecer line-height una manera que también se adapte al tamaño de fuente. Las dos propiedades están estrechamente relacionadas, y si establece una de ellas en em y la otra (p. Ej.) En px o pt , la página se interrumpirá si se cambia el tamaño de la fuente. Por lo tanto, sería contrario a la idea misma de "usar ems" para usar unidades esencialmente diferentes para propiedades esencialmente conectadas.

Por ejemplo, si establece font-size: 1.5em y line-height: 18px , entonces las cosas dependerán del tamaño de fuente del elemento primario del elemento y pueden ir muy mal si ese tamaño es mucho más pequeño o más grande de lo esperado.

Si usas la unidad em o un número puro es un problema diferente. Usar solo un número, como en line-height: 1.2 , es principalmente equivalente a usar la unidad em , como en line-height: 1.2em . Pero existe la diferencia de que cuando se hereda la line-height , es el número puro el que se hereda, no el valor computado.

Por ejemplo, si un elemento interno tiene el doble del tamaño de fuente de su padre, entonces el valor heredado 1.2 significa que se usa 1.2 veces su propio tamaño de fuente, lo cual está bien. Pero si el padre tenía line-height: 1.2em , el hijo heredaría un valor que 1.2 veces el tamaño de la fuente del padre, que es mucho más pequeño que su propio tamaño de fuente.

para obtener más ejemplos de explicaciones finales, vea line-height @ Mozilla Developer Network

Answer 4

line-height se puede establecer en px , em ''s, cada unidad se ajustará.

line-height funciona mejor y es una prueba de futuro si usas un factor / multiplicador, lo que significa que no es una unidad, sino solo un número que multiplica tu tamaño de fuente.

.foo {
  font-size: 1.3em; /* based that 1em == 10px */
  line-height: 1.3; /* 16.9px line-height */
}

Entonces, sí, puedes contestar tu pregunta: no, no deberías.

Simplemente vaya para que la altura de la línea basada en factores sea una prueba de futuro.