Как правильно определить размер шрифта

Aug 16 2020

Я пытаюсь получить 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 Sep 11 2020 at 18:27

Ответ Алохчи в комментарии:

Вы не можете этого сделать прямо сейчас. Вам нужно будет выполнить расчет на основе метрик шрифта 23px и восходящего и нисходящего шрифтов. Но в настоящее время CSS не предоставляет метрики шрифта для этого расчета. Я считаю, что есть планы раскрыть метрики шрифтов, хотя я не уверен, какую форму они примут. Во всяком случае, никакие браузеры его не поддерживают.