深入剖析 CSS：字体度量、行高和垂直对齐

Line-height 并且是简单的 CSS 属性。如此简单，以至于我们大多数人都相信要完全理解它们的工作原理以及如何使用它们。但事实并非如此。它们真的很复杂，也许是最难的，因为它们在创建CSS鲜为人知的功能之一（内联格式设置上下文）方面发挥着重要作用。 vertical-align

例如，可以设置为长度或无单位值 line-height 1，但默认值为 。好吧，但什么是正常的？我们经常读到它是（或应该是）1，或者可能是1.2，甚至是 normal CSS规范在这一点上尚不清楚.我们知道无单元是相对的，但问题是它的行为在字体系列之间是不同的，所以总是相同还是不同？它真的介于 1 和 1.2 之间吗？以及，它有什么影响？ line-height font-size font-size: 100px line-height vertical-align line-height

深入了解一个不那么简单的CSS机制...

我们先来谈谈 font-size 

看看这个简单的HTML代码，一个包含3的标签，每个标签都有不同的： <p> <span> font-family

<p>
    <span class="a">Ba</span>
    <span class="b">Ba</span>
    <span class="c">Ba</span>
</p>

p  { font-size: 100px }
.a { font-family: Helvetica }
.b { font-family: Gruppo    }
.c { font-family: Catamaran }

对不同的字体系列使用相同的字体可生成具有不同高度的元素： font-size

不同的字体系列，相同的字体大小，给出不同的高度即使我们知道这种行为，为什么不创建高度为100px的元素呢？我测量并发现了这些值：Helvetica：115px，Gruppo：97px和Catamaran：164px font-size: 100px

字体大小的元素：100px 的高度从 97px 到 164px 不等虽然乍一看似乎有点奇怪，但完全可以预料到。原因在于字体本身。以下是它的工作原理：

• 字体定义其全开-方形（或 UPM，单位单位/em），一种将绘制每个字符的容器。此正方形使用相对单位，通常设置为 1000 个单位。但它也可以是1024，2048或其他任何东西。

• 根据其相对单位，设置字体的度量（升序，降序，大写高度，x高度等）。请注意，某些值可能会在全角方块之外渗出。

• 在浏览器中，相对单位会缩放以适合所需的字体大小。

让我们采用双体船字体并将其打开FontForge获取指标：

• 全角方块为 1000

• 上升器为 1100，下降器为 540。运行一些测试后，浏览器似乎在Mac OS上使用HHead上升/下降值，在Windows上使用Win上升/下降值（这些值可能会有所不同！我们还注意到，资本高度为 680，X 高度为 485。

使用 FontForge 的字体指标值这意味着双体船字体在1000个单位的em-square中使用1100 + 540个单位，这在设置时提供164px的高度。这个计算的高度定义了元素的内容区域，我将在本文的其余部分参考这个术语。您可以将内容区域视为应用属性的区域 font-size: 100px background