¿Qué es la unidad de tamaño de fuente em? ¿Cuánto es en píxeles?

El principio M de que un em se basa en la letra M y depende de la fuente es un mito a menudo declarado!! La documentación de em del W3c describe muy sucintamente exactamente cómo se relacionan ems y píxeles. El uso de la letra M para calcular los tamaños de fuente es, al menos, demasiado complicado e innecesario.

La unidad ' em ' es igual a la calculada valor de la propiedad 'font-size' de el elemento en el que se utiliza. El excepción es cuando ' em ' ocurre en el valor de la propiedad' font-size' en sí misma, en cuyo caso se refiere a la tamaño de fuente del elemento padre. Se puede ser utilizado para vertical u horizontal medición.

Aquí están los puntos más destacados.

1. Sin la ampliación del antepasado, 1em es exactamente igual al atributo pixel font-size.

2. El aumento del ancestro con x-ems o x-por ciento significa que simplemente se multiplica por las proporciones obvias x o x/100. Por lo tanto, un simple bucle java-script calculará la fuente exacta tamaños, asumiendo: (1) ningún 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 del que habla la documentación. Un cálculo de la mano puede moverse por C. S. S., pero una unidad absoluta aún debe encontrarse en la cadena ancestro.

3. Dado que ems measure width, siempre puede calcular el tamaño de fuente exacto creando un div que tenga 1000 ems de largo y dividiendo su propiedad client-Width por 1000. Desde ems se redondean a la la milésima más cercana necesita 1000 ems para evitar el truncamiento erróneo de píxeles.

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

Advertencia

1. Una advertencia importante 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 la fuente. La relación relativa de ex también cambia con el navegador incluso con el mismo tamaño de fuente y fuente segura del navegador como Georgia. Esta es una 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 ancestro.

Se calcula a partir del tamaño de fuente de su cuerpo. Puede usar un convertidor de píxeles a em para averiguar exactamente qué es en su sitio.

PxToEm

Em es una medida utilizada originalmente en la tipografía impresa (según wikipedia). Aquí hay algunas cosas a considerar: si em se define como tipo 12pt, entonces un em es 12/72 pulgada de una página impresa; pero si define un 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 sus usuarios están en un dispositivo de 300px ancho, 1em como 16px es una gran cantidad de "bienes raíces". 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.

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

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

Como se cita de ese artículo:

Sabemos que 1em 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: Tabla de conversión de píxeles a ems para los tamaños de fuente.

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

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

De "The amazing em unit and other best practices" https://www.w3.org/WAI/GL/css2em.htm

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