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

Question

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

是的，是的，我知道这个：

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

但要注意的是大多数字形本身并不是垂直居中的。这意味着，例如，我最终将这个垂直偏离中心的 ● 放在一个方形容器中，其中 CSS:

是否有 CSS 方法使字形居中而不是字体的中线？（或者技术上居中的任何内容。）

Answer 1

从我的角度来看，您遇到的问题无法以令人满意的方式解决。问题是 a) 你使用的字符确实有字距调整、行高等，不能可靠地垂直居中，甚至不能基于每个字符，因为 b) 每个 OS 和浏览器可能有自己的您无法控制的那个角色的表现形式。

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

您看到的所有图标都是 UTF-8 emoji/characters。

Answer 2

通过放弃 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。使用 select-all 然后脚本添加的 Tools > Metrics > Center in Glyph 选项，然后使用 Tools > Metrics > Y Offset 进行一些调整我能够将字体中的所有字形垂直居中。（在我的例子中，出于某种原因，在高度选项中选择 Glyph/Center 中的中心会导致字形位于高于中心线的位置，因此我不得不进一步调整它们。）

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

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

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

How can I center a single unicode character vertically in a container?

html

css

typography

vertical-alignment