上升下降和基線

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>

上升和下降用於確定線高。每個單位和基線用於確定相對於其他字型使用的位置和大小。