如何使用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 glyphoutline of a letter as bezier paths using JavaScript? 例如回答。

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