css - paginas - ¿A qué corresponde realmente el tamaño de fuente?
lista de codigos css (2)
Estoy intentando encontrar a qué corresponde el valor establecido en la propiedad CSS del font-size .
Para dar el contexto, quiero obtener en CSS el tamaño en partes de la fuente (por encima de la altura de la capital y por debajo de la línea de base) que conozco por sus métricas OS / 2. La unidad em es relativa al font-size dado y las métricas de OS / 2 son relativas al cuadrado em.
Lo que espero
Mis expectativas se basan en las siguientes referencias. No encontré nada más claro ni preciso.
De acuerdo con la referencia de W3C para
font-sizedefont-sizeen CSS2.1 , y como se cita en todas las preguntas de Desbordamiento de pila que encontré en el tema ( here , here y here ):El tamaño de fuente corresponde al cuadrado em, un concepto utilizado en tipografía. Tenga en cuenta que ciertos glifos pueden sangrar fuera de sus cuadrados.
Siguiendo los pocos conocimientos que tengo en tipografía, el
em squarees el cuadrado completo de las métricas de fuente en las que se definen las líneas ascendentes, descendentes, brechas, (etc.). En las métricas de OS / 2, elem squarees el tamaño de la fuente en sí (a menudo 1000 o 2048 UPM).La única explicación que encontré en W3C se encuentra en una referencia antigua de 1997 para CSS1 , y es coherente con la definición digital moderna de
em squareque uso:Ciertos valores, como las métricas de ancho, se expresan en unidades que son relativas a un cuadrado abstracto cuya altura es la distancia prevista entre líneas de tipo en el mismo tamaño de tipo. Esta plaza se llama la plaza EM. (...) Los valores comunes son 250 (Intellifont), 1000 (Tipo 1) y 2048 (TrueType).
Por lo tanto, si entiendo estas referencias correctamente, el valor especificado en font-size debe usarse para generar todo el em square de la fuente, y debemos poder calcular el tamaño de una parte de la fuente a partir del tamaño y la métrica de la fuente.
Por ejemplo, con ...
.my-letter {
font-family: ''Helvetica Neue'';
font-size: 100px;
text-transform: uppercase;
}
... deberíamos tener un em square de 100px , y debido a que Helvetica Neue tiene una altura de capital de sCapHeight ( sCapHeight en la tabla OS / 2), una altura de capital de 71.4px .
Lo que realmente sucede.
El em square generado es más grande que font-size de font-size (probado en las últimas versiones de Chrome, Firefox y Safari para Mac). Al principio, pensé que el navegador tenía otra definición de em square y estaba haciendo una parte de la letra igual al font-size , pero no encontré ninguna métrica de OS / 2 (con o sin ascendente, descendente, espacios). .) que coincide con ello.
También puedes ver este CodePen . Tenga en cuenta que uso line-height: 1; para resaltar el tamaño esperado, pero mi problema es con font-size (la "tinta renderizada") y no line-height (el "cuadro de colisión"). Esto es algo que debo precisar porque ya me han malinterpretado varias veces. line-height no es el problema .
Así que tengo tres preguntas:
- ¿Entendí correctamente las referencias de W3C, o estoy asumiendo cosas que estas referencias no dijeron?
- Si no es así, ¿por qué la fuente generada tiene un em-cuadrado mayor que
font-sizedefont-size? - Lo más importante: ¿Cómo podría saber el tamaño del cuadrado de imágenes renderizado (en relación con el
font-size)?
Gracias por tu ayuda.
Lea su artículo: Eso realmente ayuda mucho a entender los tamaños de fuente:
Su comprensión de las referencias de W3C es correcta, pero su comprensión de la caja roja no lo es.
El cuadro rojo no representa el em-cuadrado. Su altura es la suma del ascenso y descenso de las métricas.