如何在容器中垂直居中单个Unicode字符? [英] How can I center a single unicode character vertically in a container?

问题描述

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

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

  .someDiv {宽度:10px；高度:10px；行高:10px；文本对齐:居中；} 

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

是否有CSS方法将字形居中而不是字体的中线?(或技术上居中的任何内容.)

解决方案

通过放弃CSS并在框外进行更多思考，我能够实现一些效果很好的事情-

首先，我下载了带有所需符号的Noto字体，因为Noto字体已获得非常宽松的许可.

When I'm making web pages I like to use unicode characters for icons when images or SVGs really aren't necessary. It's easy for me and it makes the page lighter. This works pretty well, usually, except that I always end up having to fiddle with the offset to get it centered correctly.

Yes, yes, I know about this:

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

But the catch is that most glyphs are not themselves vertically centered. This means that I end up, for example, with this vertically off-center ● in a square container with that CSS:

Is there a CSS way to center the glyph and not the font's mean line? (Or whatever is technically being centered.)

解决方案

I was able to achieve something that works reasonably well by ditching CSS and thinking a little more outside the box -

First I downloaded a Noto font with the symbols I want, since Noto fonts are very permissively licensed. https://www.google.com/get/noto/

Then I installed fontforge http://fontforge.github.io/

I added this Python script to my %appdata%/Roaming/fontforge/python/ directory (seeing as I'm on Windows) https://github.com/gumblex/stamico/blob/master/centerglyph.py

I opened the Noto TTF with fontforge. Using select-all then the Tools > Metrics > Center in Glyph option that the script adds, then some adjusting with Tools > Metrics > Y Offset I was able to vertically center all the glyphs in the font. (In my case, for some reason, choosing the Center in Glyph/Center in Height options resulted in glyphs that were positioned higher than the center line, so I had to further adjust them.)

I added a @font-face to my CSS and specified the font style for glyphs that I want to be vertically centered.

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

这篇关于如何在容器中垂直居中单个Unicode字符?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！