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

Question

当我制作网页时，当确实不需要图像或 SVG 时，我喜欢使用 unicode 字符作为图标。这对我来说很容易，而且使页面变得更轻。通常，这种方法效果很好，只是我总是不得不摆弄偏移量以使其正确居中。

\n\n

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

\n\n

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

\n\n

但问题是大多数字形本身并不是垂直居中的。这意味着我最终会\xe2\x97\x8f在带有 CSS 的方形容器中垂直偏离中心：

\n\n

\n\n

有没有一种 CSS 方法可以使字形居中而不是字体的平均线居中？（或者任何技术上集中的内容。）

\n

Answer 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我能够将字体中的所有字形垂直居中。（就我而言，由于某种原因，选择“字形中心”/“高度中心”选项会导致字形的位置高于中心线，因此我必须进一步调整它们。）

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

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