上升下降和基线

units-per-em 属性​​是最重要的字体属性之一。它用于赋予任何其他属性任何意义的任何价值。

CSS2 字体规范有一个很好的定义 em sqare

某些值(例如宽度度量)以相对于抽象方形的单位表示,其高度是相同类型大小的类型行之间的预期距离

em square 中的默认基线为 0 。对于线高计算和对齐目的,两个属性上升和下降是最重要的。

上升是从基线到最大字形最高点的最大距离。通常是 1em,所以你给每单位的价值。

下降是字体的任何字形中从基线到最低点的最大距离。

这是一种字体,其字形在最低点和最高点以及基线处呈现一条线。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
  <font id = "myFont"
        horiz-adv-x   = "1000"
        vert-origin-x = "0"
        vert-origin-y = "0" >
    <font-face font-family  = "myFont"
               font-weight  = "normal"
               units-per-em = "1000"
               descent="500"
               ascent="1000">
      <font-face-src>
        <font-face-name name="myFont"/>
      </font-face-src>
    </font-face>`
    <glyph unicode = "a" d = "M0 900h1000v100h-1000z" />
    <glyph unicode = "b" d = "M0 0h1000v100h-1000z" />
    <glyph unicode = "c" d = "M0 -500h1000v100h-1000z" />
  </font>
</svg>

上升和下降用于确定线高。每个单位和基线用于确定相对于其他字体使用的位置和大小。