Cómo definir correctamente el tamaño de fuente

Aug 16 2020

Intento obtener un spanelemento con una altura exactamente definida (en este ejemplo 23px). Sin embargo, el navegador agrega algunos píxeles al elemento.

No hay paddingy no margin, es el texto real el que es más grande. ¿Cómo obtengo la altura del texto (y con ella también la spanaltura) 23px?

Requisitos:

  • Sin prueba y error (u otro método) para averiguar un número arbitrario además de 23px para que funcione.
  • Todo el texto debe permanecer dentro del borde del tramo (independientemente del texto que esté dentro).
  • El método debe funcionar intuitivamente, si el texto se ajusta. (Es decir, el tamaño del elemento será de 46 px con dos líneas, 69 px con tres líneas, etc.)

span {
  font-size: 23px;
  line-height: 23px;
  border: red dashed 1px;
}
<span>This element is ...x28 (...x30 with border), but should be ...x23 (...x25 with border).</span>

Respuestas

1 BodoThiesen Sep 11 2020 at 18:27

Respuesta dada por Alohci en un comentario:

No puedes hacer eso ahora mismo. Debería realizar un cálculo basado en los 23px y las métricas de fuente de ascenso y descenso. Pero actualmente, CSS no expone las métricas de fuente para ese cálculo. Creo que hay planes para exponer las métricas de fuentes, aunque no estoy seguro de qué forma tomarán. De todos modos, ningún navegador lo admite.