你可以使用 CSS 的 font-size 属性来确定文本的大小。

.container {
    font-size: 33px;
}

这个属性的值可以是多种类型：

.container {
    font-size: xx-large;
}

问题是：你应该选择哪种类型的值，为什么？

这就是本文要解决的问题。它将向你展示如何使用 font-size 属性，以及它的许多值之间的差异。因此，下次你需要更改文本的字体大小时，你就知道要使用什么值。

关键字值

有两种类型的关键字值可以与字体大小一起使用：absolute-size 绝对大小和 relative-size 相对大小关键字。

下面的代码使用 absolute-size 关键字 small 来调整 HTML 文本的大小。

.childElement {
    font-size: small;
}

有更多绝对大小关键字选项可供选择：

absolute-size 关键字的值由浏览器的默认字体大小决定。通常，这个值是 medium。

相对大小的关键字是另一个要考虑的关键字选项。你有两种选择：smaller 和 larger。

.parentElement {
    font-size: smaller;
}

带有 relative-size 关键字的元素的字体大小与其父元素的字体大小相关——更大或更小。

换句话说，父元素的字体大小会影响子元素的字体大小，如下所示。

在这个例子中，相对大小值 smaller 应用于子元素，而绝对大小值 large 应用于父元素。

长度值

font-size 接受几个不同的长度值。我们将探讨其中的三个：像素（px）以及 em 和 rem 单位。不管你如何选择，你使用的长度值必须为正值。

.parentElement {
    font-size: 60px;
}

像素是绝对长度单位。这意味着，它们不受其他元素的影响，例如父元素或窗口大小。

因此，像素是精确的：你定义元素上所需的确切像素数，这通常就是你得到的。但是，浏览器之间可能存在细微差别。

请注意，子元素使用像素并在上面的代码示例中具有相同的字体大小。

像素可以被视为是固定的，而 em 则可被视为是可变的。

那是因为 em 值是一个相对长度单位。使用 em 值的元素的字体大小与其父元素的字体大小有关。

但是，假设你尚未为父元素设置字体大小，你也没有在 DOM 中更高层级的其他地方设置一个，在这种情况下，em 值是使用浏览器的默认值（通常为 16px）计算的。

让我们把这个想法具体化。

假设父元素设置为 30px，子元素设置为 2em。然后，子元素的渲染字体大小为 60px（2 x 30px = 60px）。你可以在下面的代码中看到这种情况。

由于它们的复合效应，em 值可能会出现问题，这在以下示例中得到了证明。

当你有多个使用 em 值相互嵌套的元素时，字体大小值会复合：它们变得越来越大。这就是复合效应。

输入 rem 值，创建这些值是为了处理 em 的复合问题。

回想一下 em 值是相对于父元素的。相反，rem 值与根（html）元素的字体大小有关。

这意味着你可以将 rem 值应用于元素，并且不会受到父元素字体大小的影响。这避免了上面的复合效应。

此示例使用带有 rem 值的 font-size 属性。

这是上面例子的一个关键点：父元素的字体大小不会影响子元素的字体大小。

百分比提供了另一种设置相对于父元素字体的字体大小的方法。

带有百分比的元素根据其父元素来确定其字体大小。百分比的值必须为正。

这是一个例子。

如你所见，在字体大小方面，你有很多选择可以满足需求。

我在 amymhaddad.com 上写了关于学习编程以及最佳方法的文章。我还发布了有关编程、学习和生产力的推文：@amymhaddad。