texto tamaño letra font estilos español ejemplos color cambiar css font-size em

css - font - ¿Cuál es la unidad de tamaño de letra em? ¿Cuánto es en píxeles?



tamaño de letra en html (8)

Quiero saber qué es la unidad em , y cuánto 1em es cuando se convierte en píxeles ( px ). También leí en algún lado sobre algún error de IE, para superar qué tamaño de letra del cuerpo debería establecerse en algo, pero no pude seguir mucho. ¿Alguien puede explicar eso en detalle?

El nombre de la letra "M", la unidad em tiene una larga tradición en la tipografía, donde se ha utilizado para medir anchos horizontales. Por ejemplo, el largo guión que a menudo se encuentra en los textos estadounidenses (-) se conoce como "em-dash" dado que históricamente ha tenido el mismo ancho que la letra "M". Su primo más estrecho (-), que a menudo se encuentra en textos europeos, también se conoce como "en-dash".

El significado de "em" ha cambiado a lo largo de los años. No todas las fuentes tienen la letra "M" (por ejemplo, chino), pero todas las fuentes tienen altura. Por lo tanto, el término ha llegado a significar la altura de la fuente, no el ancho de la letra "M".

De "The amazing em unit y otras mejores prácticas" https://www.w3.org/WAI/GL/css2em.htm

¡El principio M de que una em se basa en la letra M y depende de la fuente es un mito a menudo establecido! La documentación de W3c em describe muy sucintamente cómo se relacionan ems y pixels. Usar la letra M para calcular los tamaños de fuente es, por lo menos, demasiado complicado e innecesario.

La unidad ''em'' es igual al valor calculado de la propiedad ''font-size'' del elemento en el que se usa. La excepción es cuando ''em'' aparece en el valor de la propiedad ''font-size'', en cuyo caso se refiere al tamaño de la fuente del elemento padre. Se puede usar para mediciones verticales u horizontales.

Estos son los puntos destacados.

  1. Sin ampliación de antecesor, 1em es exactamente igual al atributo de tamaño de fuente de píxeles.

  2. La ampliación del ancestro con x-ems o x-por ciento significa que simplemente se multiplica por las razones obvias x o x / 100. Por lo tanto, un bucle simple de java-script calculará el tamaño exacto de las fuentes, asumiendo que: (1) no hay CSS para frustrar el script java; y (2) algún ancestro tiene su tamaño de fuente establecido en unidades absolutas. Este es el valor calculado de la documentación que está hablando. Un cálculo manual puede abarcar CSS, pero aún debe encontrarse una unidad absoluta en la cadena de ancestros.

  3. Dado que ems mide el ancho, siempre puedes calcular el tamaño de letra exacto creando un div de 1000 ems de longitud y dividiendo su propiedad de ancho de cliente por 1000. Como los ems se redondean a la milésima más cercana, necesitas 1000 ems para evitar el truncado erróneo de los píxeles.

  4. Probablemente pueda crear una fuente donde el principio M falla, ya que em se basa en el atributo de tamaño de fuente que no está en la fuente real. Supongamos que tiene una fuente extraña donde M tiene 1/3 del tamaño de los otros caracteres y tiene un tamaño de letra de 10 píxeles. ¿No crees que el tamaño de letra de píxel garantiza la altura máxima del carácter de alguna manera, por lo que la M no será de 10 píxeles y el resto de caracteres de 30 píxeles?

Advertencia

  1. Una advertencia importante para (2) es que la relación relativa de la ex unidad es muy inestable. En el mismo navegador con fuente constante, la relación relativa puede cambiar con el tamaño de fuente. La proporción relativa de ex también cambia con el navegador incluso con el mismo tamaño de letra y fuente segura para el navegador como Georgia. Esta es una muy buena razón para no usar nunca la unidad EX si desea conformidad. Si se utiliza la unidad ex, es imposible calcular el tamaño de fuente a través de la cadena de ancestros.

A pesar de lo que puedes leer en otro lugar, no hay una relación directa entre em y px.

Como dice uno de los enlaces:

el valor "em" se basa en el ancho de la mayúscula M

Así que va a ser diferente para cada fuente. Una fuente estrecha puede tener la misma altura (en px) que una fuente extendida, pero el tamaño de em será diferente.

EDITAR tres años después:

Ahora hay muchas fuentes que dicen que 1em = tamaño de fuente (en px). Es decir, cuando escribe font-size:16px , entonces 1em = 16px. Esto todavía no concuerda con la fuente de Adobe (que dice 1em = el tamaño de fuente en pt ), pero en cualquier caso parece extraño; el tamaño de em sería demasiado grande con fuentes condensadas y demasiado pequeño con fuentes extendidas.

Voy a hacer algunas páginas de prueba y ver por mí mismo.

Y también:

Veo que nadie (incluyéndome a mí) realmente respondió la pregunta (que estaba algo oculta):

También leí en algún lugar acerca de algunos errores, por ejemplo, y para superar ese conjunto de tamaño de fuente del cuerpo a algo

De acuerdo con esta página , debe agregar esto a su css: html{ font-size:100%; } html{ font-size:100%; } . Esa página tiene seis años y no he leído los (cientos) de comentarios, por lo que no sé si aún es relevante.

EM es una unidad de medida proporcional al tamaño del punto de una fuente.

Se calcula sin importar el tamaño de fuente de tu cuerpo. Puede usar un convertidor de píxel a em para averiguar exactamente qué es en su sitio.

PxToEm

em es una medida utilizada originalmente en tipografía impresa (según wikipedia). Aquí hay algunas cosas a considerar: si em se define como el tipo de 12pt, entonces un em es 12/72 pulgadas de una página impresa; pero si define una em como 16px, su ancho en pulgadas depende de la resolución de los medios. (Nota: la resolución de 72ppi a 120ppi solía considerarse un estándar de "navegador seguro" antes de la llegada de los dispositivos móviles). Por lo tanto, cuando los usuarios están en un dispositivo de 300 px de ancho, 1em como 16 px es mucho "inmobiliario". El mejor uso de las medidas em, en mi opinión, son la definición de párrafos de textos para equilibrar el espacio en blanco de manera efectiva, no para el diseño de la página o el posicionamiento.