如何使用CSS将字符置于框中心？

Question

换句话说，我如何忽略角色的深度和上升，而不是仅仅根据其边界框将垂直居中放在周围的框中？

这是一个最小的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>

它产生以下内容：

如何更改它以生成以下内容？

CSS解决方案如果存在则是首选，但Javascript作为最后的手段是可以接受的。我正在寻找一个通用的解决方案，而不仅仅是图中的三个字符。我的页面中会有很多这样的框，所以性能（如果使用Javascript）很重要。

为了进一步澄清事情，我将在LaTeX中执行此操作：

\newlength{\desiredboxsize}
\setlength{\desiredboxsize}{1em}
\newcommand*{\centercharinbox}[1]{%
  % Force width
  \makebox[\desiredboxsize]{%
    % Force height and center vertically
    \raisebox{\dimexpr .5\desiredboxsize - .5\height \relax}[\desiredboxsize][0pt]{%
      % Cancel depth
      \raisebox{\depth}{#1}}}}

Answer 1

理论上，您可以通过单独对齐每个符号来实现。

实际上，你不能因为每个符号在字符映射中都有自己的深度和上升，特别是只使用CSS。

Answer 2

你不能用现代的CSS做到这一点。你也不能在浏览器中使用JavaScript开箱即用。

基本上：你需要将字形轮廓作为字体的路径。使用该信息，您可以获得路径轮廓框并以您需要的方式渲染/对齐。

要获取字形轮廓，请查看此How do I get glyph outlines of a letter as bézier paths using JavaScript?答案。

拥有字形轮廓路径，您可以将它们渲染为<canvas>元素。