Как правильно определить размер шрифта
Я пытаюсь получить span
элемент с точно определенной высотой (в этом примере 23px
). Однако браузер добавляет к элементу несколько пикселей.
Нет padding
и нет margin
, это фактический текст больше. Как мне получить высоту текста (а вместе с ней и span
высоту) до 23px
?
Требования:
- Никаких проб и ошибок (или другого метода), чтобы вычислить произвольное число, кроме 23 пикселей, чтобы заставить его работать.
- Весь текст должен оставаться в пределах диапазона (независимо от текста внутри).
- При переносе текста метод должен работать интуитивно. (Т.е. размер элемента будет 46 пикселей с двумя линиями, 69 пикселей с тремя линиями и т. Д.)
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>
Ответы
1 BodoThiesen
Ответ Алохчи в комментарии:
Вы не можете этого сделать прямо сейчас. Вам нужно будет выполнить расчет на основе метрик шрифта 23px и восходящего и нисходящего шрифтов. Но в настоящее время CSS не предоставляет метрики шрифта для этого расчета. Я считаю, что есть планы раскрыть метрики шрифтов, хотя я не уверен, какую форму они примут. Во всяком случае, никакие браузеры его не поддерживают.