如何使用 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> 个元素。

如何使用 CSS 将字符居中放置在框中？

How do I center a character in a box using CSS?

css

typography

centering