CSS 字体大小 vs 行高 vs 实际高度

在本文中，我们将介绍 CSS 中的字体大小（font-size）、行高（line-height）和实际高度（actual height）的概念，并通过示例说明它们之间的关系和差异。

阅读更多：CSS 教程

字体大小（font-size）

字体大小指的是文本中字符的字体的尺寸。可以使用绝对单位（如像素）、相对单位（如百分比）或其他相对于父元素的单位（如 em）来定义字体大小。字体大小的默认值是 16 像素。下面是一些示例，展示了如何设置字体大小：

p {
  font-size: 16px; /* 绝对单位 */
}

h1 {
  font-size: 2em; /* 相对于父元素的单位 */
}

h2 {
  font-size: 150%; /* 相对单位 */
}

行高（line-height）

行高指的是文本行的高度。它决定了文本行之间垂直间距的大小。与字体大小一样，行高可以使用绝对单位、相对单位或其他相对于父元素的单位来定义。行高的默认值通常是 1.2，它是相对于字体大小的倍数。下面是一些示例，展示了如何设置行高：

p {
  line-height: 24px; /* 绝对单位 */
}

h1 {
  line-height: 1.5em; /* 相对于父元素的单位 */
}

h2 {
  line-height: 200%; /* 相对单位 */
}

实际高度（actual height）

实际高度是指文本在屏幕中实际占据的高度。它是由字体大小和行高决定的。实际高度不包括文本的上下间距（行高），只计算字符的垂直高度。虽然 CSS 并没有提供直接设置实际高度的方法，但我们可以根据字体大小和行高的值计算出实际高度。实际高度的计算公式如下：

实际高度 = 字体大小 + 上下行间距

下面是一个示例，展示了如何计算实际高度：

p {
  font-size: 16px;
  line-height: 24px;
}

h1 {
  font-size: 2em;
  line-height: 1.5em;
}

h2 {
  font-size: 150%;
  line-height: 200%;
}

/* 实际高度计算示例 */
p {
  height: calc(16px + 8px + 8px); /* 上下行间距为 8px */
}

h1 {
  height: calc(2em + 1em + 1em); /* 上下行间距为 1em */
}

h2 {
  height: calc(150% + 1.5em + 1.5em); /* 上下行间距为 1.5em */
}

总结

通过本文，我们了解了 CSS 中的字体大小、行高和实际高度的概念。字体大小决定了字符的尺寸，行高决定了文本行之间的垂直空间，而实际高度是文本在屏幕中实际占据的高度。通过适当地设置字体大小和行高，我们可以控制文本的外观和布局。希望本文对你理解字体相关的 CSS 属性有所帮助。