¿Qué es em font-size? ¿Cuánto es en píxeles?

Question

Quiero saber qué es y cuánto es en píxeles. 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?

Answer 1

A pesar de lo que puede leer en otro lugar, no existe ninguna relación directa entre ellos y px.

Como uno de los enlaces que establece lo siguiente:

el "em" valor se basa de la anchura 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 y tres años después:

En la actualidad hay una gran cantidad de fuentes que dicen que el tamaño de la fuente 1 em = (en píxeles). 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 letra 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 (incluido yo) en realidad responde a la pregunta (que fue un poco escondido):

También leí en algún lugar sobre algunos es decir, de errores y de superar ese cuerpo conjunto de fuentes de tamaño a algo

Según this page, es necesario agregar esto a tu CSS: 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.

Answer 2

Aquí es la buena explicación:

• px – em – % – pt – keyword

Y px to em converter tool

Answer 3

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

PxToEm

Answer 4

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

Answer 5

em es casi el mismo que el porcentaje, sugiero leer http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

Answer 6

este enlace puede ayudarle a http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css

Como se cita de ese artículo:

Sabemos que 1 em es siempre igual al tamaño de fuente del elemento padre, por lo tanto:

1 ÷ parent font-size × required pixel value = em value 

Para sus marcadores: Pixel to ems conversion table para tamaños de fuente.

Answer 7

¡El principio M de que una em se basa en la letra M y depende de la fuente es un mito que a menudo se menciona! W3c em documentation 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' de el elemento en el que se utiliza. La excepción se produce cuando 'em' aparece en el valor de la propiedad 'tamaño de fuente' , en cuyo caso se refiere al tamaño de fuente del elemento principal. Es se puede utilizar para la medición vertical u horizontal .

A continuación se detallan los puntos destacados.

1. sin aumento antepasado, 1 em es exactamente igual al atributo de píxeles de tamaño de fuente.

2. La ampliación del antecesor 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á los tamaños exactos de las fuentes, suponiendo: (1) no C.S.S para frustrar java-script; 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 moverse alrededor de C.S.S., pero aún debe encontrarse una unidad absoluta en la cadena de antepasados.

3. Dado que el ancho de la medida de ems siempre se puede 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 el ems se redondea a la milésima más cercana, se necesitan 1000 ems para evitar truncamiento erróneo de 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 importante advertencia a (2) es que la relación relativa de la unidad ex es tremendamente 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.

Answer 8

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.

Answer 9

Nombrado después de la letra "M", la unidad em tiene una larga tradición en la tipografía en la que 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".

La unidad em increíble y otras mejores prácticas https://www.w3.org/WAI/GL/css2em.htm