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

Line-height并且是简单的CSS属性。如此简单，以至于我们大多数人都相信要完全理解它们的工作原理以及如何使用它们。但事实并非如此。它们真的很复杂，也许是最难的，因为它们在创建CSS鲜为人知的功能之一（内联格式设置上下文）方面发挥着重要作用。 vertical-align
例如，可以设置为长度或无单位值line-height1 ，但默认值为。好吧，但什么是正常的？我们经常读到它是（或应该是）1 ，或者可能是1.2 ，甚至是normalCSS规范在这一点上尚不清楚.我们知道无单元是相对的，但问题是它的行为在字体系列之间是不同的，所以总是相同还是不同？它真的介于1和1.2之间吗？以及，它有什么影响？line-heightfont-sizefont-size:100pxline-heightvertical-alignline-height
深入了解一个不那么简单的CSS机制...
我们先来谈谈font-size
看看这个简单的HTML代码，一个包含3的标签，每个标签都有不同的：font-family
<spanclass=''a''>Ba<spanclass=''b''>Ba<spanclass=''c''>Bap{font-size:100px}.a{font-family:Helvetica}.b{font-family:Gruppo}.c{font-family:Catamaran}
对不同的字体系列使用相同的字体可生成具有不同高度的元素：font-size

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

文章图片
字体大小的元素：100px的高度从97px到164px不等虽然乍一看似乎有点奇怪，但完全可以预料到。原因在于字体本身。以下是它的工作原理：
字体定义其全开-方形（或UPM ，单位单位/em），一种将绘制每个字符的容器。此正方形使用相对单位，通常设置为1000个单位。但它也可以是1024 ， 2048或其他任何东西。
根据其相对单位，设置字体的度量（升序，降序，大写高度， x高度等）。请注意，某些值可能会在全角方块之外渗出。
在浏览器中，相对单位会缩放以适合所需的字体大小。
让我们采用双体船字体并将其打开FontForge获取指标：
全角方块为1000
上升器为1100 ，下降器为540 。运行一些测试后，浏览器似乎在MacOS上使用HHead上升/下降值，在Windows上使用Win上升/下降值（这些值可能会有所不同！我们还注意到，资本高度为680 ， X高度为485 。

文章图片
使用FontForge的字体指标值这意味着双体船字体在1000个单位的em-square中使用1100+540个单位，这在设置时提供164px的高度。这个计算的高度定义了元素的内容区域，我将在本文的其余部分参考这个术语。您可以将内容区域视为应用属性的区域font-size:100pxbackground2.
我们还可以预测大写字母高68px（680个单位），小写字母（x高度）高49px（485个单位）。因此， =49px和=100px ，而不是164px（谢天谢地，它基于，而不是计算高度）1ex1ememfont-size

文章图片
双体船字体：UPM—单位单位-单位-Em—使用字体大小等效像素：100px在深入探讨之前，请简要说明它涉及的内容。当元素在屏幕上呈现时，它可以根据其宽度由多行组成。每行由一个或多个内联元素（HTML标记或文本内容的匿名内联元素）组成，称为行框。行框的高度基于其子级的高度。因此，浏览器会计算每个内联元素的高度，从而计算行框的高度（从子元素的最高点到子元素的最低点）。因此，行框始终足够高，可以包含其所有子级（默认情况下）。