Как центрировать символ в поле с помощью CSS?

Другими словами, как игнорировать глубину символов и восхождение вместо центрировать по вертикали в окружающем поле, основанном только на его ограничивающей рамке?

Вот минимальный пример html:

.box {
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1em;
  border: 1px solid black;
  text-align: center;
}

<span class="box">?</span>
<span class="box">,</span>
<span class="box">`</span>

Ответ 1

Вы не можете сделать это с помощью современного CSS. Вы также можете сделать это из коробки с JavaScript в браузерах.

По существу: вам нужно получить контуры глифов как пути от шрифтов. Используя эту информацию, вы можете получить поле контура маршрута и визуализировать/выровнять так, как вам нужно.

Для получения очертаний глифа проверьте это Как получить глиф-контуры буквы как пути bézier, используя JavaScript?, например.

Имея пути контура глифа, вы можете визуализировать их в <canvas>.

Ответ 2

В теории вы можете сделать это, совместив символ каждый.

Практически вы не можете, так как каждый символ имеет свою собственную глубину и восхождение на карте символов, особенно с использованием только CSS.