为你揭示 Font-size 的复杂世界，一个平凡 CSS 属性的奥秘

font-size 可能是一个基础且随处可见的 CSS 属性，但它却有着意外的复杂性。曾几何时，我从未注意过它，直到我开始投入于 stylo 这个项目。stylo 致力于将 Servo 的样式系统集成到 Firefox 中，这个系统会解析 CSS、确定哪些规则适用于哪些元素，并通过级联规则计算样式值。

CSS 系统中，font-size 的作用是为了设定元素中字体的尺寸，它可以用不同的单位表示，如像素 (px)、相对单位 (em) 和百分比 (%)。但这仅仅是这个属性的表面功能，深入挖掘，font-size 就变得非常复杂，涉及到了单位转换、继承、相对值计算、百分比值计算和行高等等，需要我们仔细剖析。

1. font-size 单位

   font-size 单位主要分为以下四种：

   • 绝对单位 ：像素 (px)、英寸 (in)、厘米 (cm)、毫米 (mm) 和点 (pt)。这些单位提供了精确的像素值，适用于需要固定尺寸的元素。
   • 相对单位 ：em 和 rem。它们相对于父元素的 font-size 而定。例如，如果父元素的 font-size 为 16px，那么子元素的 font-size 为 2em，则子元素的 font-size 为 32px。
   • 百分比单位 ：百分比 (%)。它相对于父元素的 font-size 进行计算。例如，如果父元素的 font-size 为 16px，那么子元素的 font-size 为 50%，则子元素的 font-size 为 8px。
   • 继承 ：如果元素的 font-size 没有被明确指定，它将继承父元素的 font-size。继承是一个强大的功能，它可以帮助我们轻松地创建一致的字体大小。

2. font-size 计算

   当元素的 font-size 被指定为相对单位或百分比单位时，需要进行计算以确定其实际值。计算方式如下：

   • 相对单位 ：子元素的 font-size = 父元素的 font-size * 相对单位值。
   • 百分比单位 ：子元素的 font-size = 父元素的 font-size * 百分比值 / 100。

3. font-size 与行高

   行高 (line-height) 是另一个与 font-size 密切相关的 CSS 属性。行高是指元素中两行文本之间的距离。通常情况下，行高是 font-size 的 1.2 倍，但我们也可以通过 CSS 来调整行高。

font-size 并不是一个简单的属性，它还有着许多需要注意的细节，比如：负值、继承、计算等，需要我们仔细理解和掌握。只有这样，我们才能真正驾驭这个强大的属性，设计出令人惊叹的排版效果。