如何在容器中垂直居中单个 unicode 字符？答案

【问题标题】：How can I center a single unicode character vertically in a container?如何在容器中垂直居中单个 unicode 字符？
【发布时间】：2018-09-25 03:36:27
【问题描述】：

当我制作网页时，我喜欢在真正不需要图像或 SVG 的情况下使用 unicode 字符作为图标。这对我来说很容易，它使页面更轻。这通常工作得很好，除了我总是不得不摆弄偏移以使其正确居中。

是的，是的，我知道这一点：

.someDiv {
   width: 10px;
   height: 10px;
   line-height: 10px;
   text-align: center;
}

但要注意的是，大多数字形本身并不是垂直居中的。这意味着我最终会在一个带有该 CSS 的方形容器中使用垂直偏离中心的 ●：

有没有一种 CSS 方法可以使 glyph 居中而不是字体的中线？（或者任何在技术上居中的东西。）

【问题讨论】：

相关：stackoverflow.com/q/58924157/8620333

标签： html css vertical-alignment typography

【解决方案1】：

我能够通过放弃 CSS 并跳出框框思考更多的东西 -

首先我下载了带有我想要的符号的 Noto 字体，因为 Noto 字体是非常宽松的许可。 https://www.google.com/get/noto/

然后我安装了fontforge http://fontforge.github.io/

我将此 Python 脚本添加到我的 %appdata%/Roaming/fontforge/python/ 目录（就像我在 Windows 上一样）https://github.com/gumblex/stamico/blob/master/centerglyph.py

我用 fontforge 打开了 Noto TTF。使用全选，然后使用脚本添加的Tools > Metrics > Center in Glyph 选项，然后使用Tools > Metrics > Y Offset 进行一些调整，我能够将字体中的所有字形垂直居中。（在我的例子中，出于某种原因，选择字形中心/高度中心选项会导致字形的位置高于中心线，因此我不得不进一步调整它们。）

我在我的 CSS 中添加了一个 @font-face，并为我想要垂直居中的字形指定了字体样式。

@font-face {
    font-family: "symbol-font";
    src: url(ux/NotoSansSymbols2-Aligned.ttf);
}

【讨论】：

这只是我想要垂直居中的很多字形中的一个示例。我可能最终会为单选按钮做其他事情！我选择这个作为我的工作示例，因为很容易看出它是否居中。老实说，所有这些花费的时间都比手动计算出所有这些垂直偏移所花费的时间要少。

【解决方案2】：

从我的角度来看，您所经历的事情无法以令人满意的方式解决。问题是a）您使用的字符确实具有字距调整、行高等并且不能可靠地垂直居中，甚至不是基于每个字符，因为b）每个操作系统和浏览器都可能有自己的那个字符的表示这是你无法控制的。

尽管如此，我还是喜欢这种方法，因为它非常轻巧，而且我过去也使用过它，例如在我的扫雷游戏https://connexo.de/defuse

您在那里看到的所有图标都是 UTF-8 表情符号/字符。

【讨论】：