如何使用 CSS 在框中将字符居中？答案

【问题标题】：How do I center a character in a box using CSS?如何使用 CSS 在框中将字符居中？
【发布时间】：2016-09-19 12:52:15
【问题描述】：

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

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

【问题讨论】：

@Oriol，感谢您的编辑！
我想知道 CanvasRenderingContext2D.measureText 是否可以用 JS 来实现这一点，但似乎只有 Chrome 支持垂直属性，并且它们为所有字符返回相同的值。

标签： css centering typography

【解决方案1】：

理论上，您可以通过单独对齐每个符号来做到这一点。

实际上，您不能因为每个符号在字符映射中都有其自己的深度和上升，尤其是仅使用 CSS 时。

【讨论】：

你确定Character Map 是正确的词吗？我不确定我明白你的意思。
我的意思是，角色是根据他们的位置绘制（制作）的。例如：,，逗号在底部。
当然，这就是 , 字符 IIUC 的上升、下降和深度。我只是建议删除提到的字符图，这似乎是一个不相关的概念:) 顺便说一句，欢迎来到该网站！
谢谢！我对其进行了编辑，使其更易于理解。

【解决方案2】：

现代 CSS 无法做到这一点。您也不能在浏览器中使用 JavaScript 开箱即用地做到这一点。

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

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

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

【讨论】：

谢谢，这是一个很好的建议。我认为实际上可以进一步推动它并静态构建相应的字体。
@Clément 是的，如果它只是一种字体，那么您可以将其转换为 SVG 图像（静态）。取决于您的用例。
实际上，我只是想构建一个自定义 TTF； fontforge 对此有很好的脚本支持。