Como definir corretamente o tamanho da fonte
Tento obter um span
elemento com uma altura exatamente definida (neste exemplo 23px
). No entanto, o navegador adiciona alguns pixels ao elemento.
Não há padding
e não margin
, é o texto real que é maior. Como faço para obter a altura do texto (e com ele também a span
altura) 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
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.
O que significa um erro “Não é possível encontrar o símbolo” ou “Não é possível resolver o símbolo”?
George Harrison ficou chateado por suas letras de 'Hurdy Gurdy Man' de Donovan não terem sido usadas