¿Cómo se calcula el tamaño de fuente?

Question

Tengo un complejo JS funcionan con una ecuación en la que realmente se necesita para entender la cantidad de espacio en píxeles tamaños de fuente ocupan.

Me he dado cuenta que los tamaños de algún tipo de letra son diferentes dependiendo de la fuente.

¿Cómo se calcula el tamaño de una fuente? Si su conjunto a 12px, en CSS, lo que quiere decir el 12px? Es que gran 12px? ¿Alto? O se trata de una medida de píxeles en diagonal?

Answer 1

Vea la especificación :

  

El tamaño corresponde a la fuente em   cuadrado, un concepto utilizado en la tipografía.
  Tenga en cuenta que ciertos glifos pueden sangrar   fuera de sus casillas em.

Answer 2

La altura es la medida estándar

altura

Font se mide o se especifica por la altura de una línea, que es la altura total requerido para mostrar la gama de caracteres, incluyendo los que descienden por debajo de la línea, como j, y elementos elevados (acentos en mayúsculas, por ejemplo ) como Ê.

_{(fuente: banzaimonkey.net )}

Fuentes en orden de aparición:. Times New Roman, Courier New, Calibri, Consolas

Ancho

Ancho de glifos varía entre fuentes, como se puede ver en la imagen anterior. También hay una importante distinción entre fuentes proporcionales y fixed-width. Para fuentes de ancho fijo, el espacio de cada personaje ocupa en la línea es exactamente el mismo (aunque los personajes en sí mismos pueden no del todo ser del mismo tamaño que una sola otra. Para las fuentes proporcionales, el espacio que utiliza cada personaje está más en línea con su forma, en relación con otros caracteres, por lo i , j y l son varían estrecho, mientras que w , m y o son por lo general más amplia.

Fuentes

Fuentes mismos hacen glifos de diferentes maneras (obviamente, ya que se ven diferentes fuentes), y esto significa que un carácter particular, no necesariamente lo convierte en la misma altura a través de las fuentes. También significa que no hay forma estándar para averiguar cuánto mide un determinado personaje podría estar en cualquier tamaño dado, además de la prestación de la fuente.

Probablemente no sea obvio para la mayoría, pero si se examinan los términos de licencia para fuentes que dará cuenta de que tienen licencia como software de fuente . Esencialmente, cada fuente contiene un conjunto de algoritmos que determinan cómo la fuente debe ser generado en un contexto dado (varios tamaños, negrita, cursiva, etc.).

Por lo tanto, la mejor manera de averiguar cómo una fuente hará que en un contexto dado es hacer y ver.

Ediciones del apresto

Hay algunas advertencias para los tamaños de fuente cuando se trata de cosas en la web.

Para la Web

Como cualquier diseñador web sabe bien, no hay cosas son iguales. Hay un sinnúmero de variables que entran en juego cuando se representa una página que puede dar lugar a diferencias entre los usuarios, tales como navegador, fuentes predeterminadas, zoom, suavizado, dando a entender, la escala del navegador, que opera el sistema de escala, etc.

A List Apart (antes de saltar el tiburón) tiene algunos buenos artículos sobre la estandarización de los tamaños de fuente y ayudar a obtener algunos nivel de similitud entre los navegadores:

• tamaño importa
• tamaños de fuente relativos
• texto Detección de cambio de tamaño
• Configuración del tipo en la Web a una rejilla base

Mientras que usted puede hacer su diligencia debida, vas a tener que aceptar que el medio Web implica un cierto nivel de variabilidad que no se puede controlar.

Imprimir vs. píxeles

Debido a que los píxeles no son típicamente una escala natural para fuentes (diferentes mediciones se utilizan para la impresión), los algoritmos insinuando pueden rinden fuentes sale a pixel o dos, en particular en los pequeños tamaños, a fin de retener la forma de los caracteres.

De hecho, el algoritmo haciendo alusión a menudo es completamente diferente en tamaños pequeños, y en el trabajo profesional que probablemente utilice una fuente diferente por completo de tamaños por debajo de 12 puntos.

Pixels también son en relación con el tamaño de visualización,así 12px habrá un tamaño físico diferente en estas pantallas:

• 20" monitor a 1680x1050
• monitor de 22" a 1680x1050
• pantalla del iPhone
• pantalla de Blackberry
• etc.

TL; DR

Así que en resumen, es complicado. font-size refiere a la altura necesaria para mostrar la gama de personajes, sino en la naturaleza e internet lanudo, siempre hay excepciones.

Answer 3

Esta es una respuesta complementaria. He encontrado la tabla de este sitio muy útil para conseguir una gran comprensión imagen.

Answer 4

Por la especificación ( http://www.w3.org/TR/CSS2 /fonts.html )

  

El tamaño corresponde a la fuente em   cuadrado, un concepto que se utiliza en la tipografía.   Tenga en cuenta que ciertos glifos pueden sangrar   fuera de sus casillas em.

El tamaño del cuadrado em explicó: http://www.emdpi.com/emsquare.html

Answer 5

Debe utilizar .getClientRects() si lo que necesita saber cuánto espacio de una racha de texto está / se llevará a mostrar en la pantalla.

La interacción real entre lo que se propuso y qué tamaño que obtendrá es un tanto complicado. La especificación CSS3 pone más claramente que la especificación CSS2 citado en otras respuestas:

  

Esta propiedad indica la altura deseada de los glifos de la fuente.   Para fuentes escalables, el tamaño de fuente es un factor de escala aplicado a la EM   unidad de la fuente.

Básicamente, se puede controlar el tamaño de la "em cuadrada". Las formas de fuente se definen en relación con esto, pero sin duda puede desviarse fuera / dentro de esta caja (a veces significativamente).

Y eso es sólo el comienzo! Incluso si se asume un tipo de letra que se corresponde muy de cerca a esta em-cuadrado - ¿Vas a multiplicar la longitud de la cadena de este tamaño? A menos que sea monoespaciado y su texto es ASCII-solamente, usted tiene mucho de qué preocuparse: anchuras variables de caracteres, kerning y ligaduras, el comportamiento de envolver, y por supuesto otras advertencias aún más simples "longitud de la cuerda" como las fichas, Unicode que combinan caracteres y códigos de control .