Como definir corretamente o tamanho da fonte

Aug 16 2020

Tento obter um spanelemento com uma altura exatamente definida (neste exemplo 23px). No entanto, o navegador adiciona alguns pixels ao elemento.

Não há paddinge não margin, é o texto real que é maior. Como faço para obter a altura do texto (e com ele também a spanaltura) 23px?

Requisitos:

  • Nenhuma tentativa e erro (ou outro método) para descobrir algum número arbitrário além de 23px para fazê-lo funcionar.
  • O texto inteiro precisa ficar dentro da borda da extensão (independentemente do texto dentro).
  • O método deve funcionar intuitivamente, se o texto quebrar. (Por exemplo, o tamanho do elemento será 46px com duas linhas, 69px com três linhas 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>

Respostas

1 BodoThiesen Sep 11 2020 at 18:27

Resposta dada por Alohci em um comentário:

Você não pode fazer isso agora. Você precisaria realizar um cálculo com base no 23px e nas métricas de fonte de subida e descida. Mas, atualmente, o CSS não expõe as métricas de fonte para esse cálculo. Acredito que haja planos para expor as métricas das fontes, embora não tenha certeza de que forma elas irão assumir. Nenhum navegador oferece suporte, de qualquer maneira.