英文字体在规范中被分为两部分, baseline 之上的部分称为 A, baseline 之下的部分称为 D
规范里面有这样的一段话, 指明了 CSS 是存在 baseline 的概念的
CSS assumes that every font has font metrics that specify a characteristic height above the baseline and a depth below it. In this section we use A to mean that height (for a given font at a given size) and D the depth. We also define AD = A + D, the distance from the top to the bottom. (See the note below for how to find A and D for TrueType and OpenType fonts.) Note that these are metrics of the font as a whole and need not correspond to the ascender and descender of any individual glyph.
Answer
规范: https://www.w3.org/TR/css-inline-3/ https://www.w3.org/TR/CSS2/visudet.html#line-height
参考: https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
英文字体在规范中被分为两部分, baseline 之上的部分称为 A, baseline 之下的部分称为 D
规范里面有这样的一段话, 指明了 CSS 是存在 baseline 的概念的
在中文中, 没有 baseline 的概念, 因为中文是用的田字格, 不像英文的三线, 在浏览器的实测中:
chrome:
可以看到, 中文字体底部没有和英文字体的 baseline 对齐, 同样也没有和英文字体的底部对齐, 这里中的字体是 SongTi SC, 英文字体是 Times.
firefox:
可以看到, 中文字体底部没有和英文字体的 baseline 对齐, 同样也没有和英文字体的底部对齐, 这里中的字体是 PingFang SC Regular, 英文字体是 Times.
Notes: 这个问题是从如何将 svg icon 和 文字对齐引出的, 可以看上面的参考链接, 对齐 Icon 只需要和英文对齐就好, 自然会和中文文字正常显示