CSS font-size 属性

CSS font-size 语法

在 CSS 中，font-size 属性用于定义字体的大小。

语法：

font-size: 关键字或数值;

说明：

font-size 的取值有 2 种。

关键字：取值有 xx-small、smaller、medium、small、large、larger、x-large、xx-large 等，默认值为 medium。其中 smaller 和 larger 是相对于父元素的字体大小进行调整。
数值：比如像素值（px）、百分比（%）、rem、em 等。

对于 font-size 取值为关键字这种方式，只需简单了解即可。在实际开发中，大多数情况下都是使用数值方式。

注意:

em 单位是相对于当前元素的父元素的字体大小。
rem 单位是相对于根元素（<html>）的字体大小。
vw 单位是相对于视口宽度的百分比。
vh 单位是相对于视口高度的百分比。
字体粗细（font-weight）和字体大小（font-size）是不一样的。粗细指的是字体的 “肥瘦”，而大小指的是字体的 “宽高”。

CSS font-size 摘要

属于	CSS 字体大小
使用频率	高
是否继承	是
默认值	medium（16px）
兼容性	查看
官方文档	查看
MDN	查看

CSS font-size 示例

接下来，我们通过几个简单的例子来讲解一下 CSS font-size 属性是如何使用的。

示例 1：font-size 取值为关键字

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        p:nth-child(1) { font-size: xx-small; }
        p:nth-child(2) { font-size: x-small; }
        p:nth-child(3) { font-size: smaller; }
        p:nth-child(4) { font-size: small; }
        p:nth-child(5) { font-size: medium; }
        p:nth-child(6) { font-size: large; }
        p:nth-child(7) { font-size: larger; }
        p:nth-child(8) { font-size: x-large; }
        p:nth-child(9) { font-size: xx-large; }
    </style>
</head>
<body>
    <p>字体大小为：xx-small</p>
    <p>字体大小为：x-small</p>
    <p>字体大小为：smaller</p>
    <p>字体大小为：small</p>
    <p>字体大小为：medium（默认值）</p>
    <p>字体大小为：large</p>
    <p>字体大小为：larger</p>
    <p>字体大小为：x-large</p>
    <p>字体大小为：xx-large</p>
</body>
</html>

页面效果如下图所示。

font-size取值为关键字

示例 2：font-size 取值为 px 值

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        p:nth-child(1) { font-size: 12px; }
        p:nth-child(2) { font-size: 14px; }
        p:nth-child(3) { font-size: 16px; }
    </style>
</head>
<body>
    <p>字体大小为：12px</p>
    <p>字体大小为：14px</p>
    <p>字体大小为：16px</p>
</body>
</html>

页面效果如下图所示。

font-size取值为px值

分析：

在实际开发中，12px、14px 和 16px 是最常见的字体大小。

示例 3：font-size 取值为 em 值

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .parent {
            font-size: 16px;
        }
        .child {
            font-size: 1.5em;   /* 相对于父元素字体大小 */
        }
    </style>
</head>
<body>
    <div class="parent">
        父元素文本
        <p class="child">子元素文本</p>
    </div>
</body>
</html>

页面效果如下图所示。

font-size取值为em值

分析：

在这个例子中，父元素的字体大小为 16px。子元素的字体大小设置为 1.5em，这意味着子元素的字体大小是父元素字体大小的 1.5 倍，即 16px * 1.5 = 24px。其中，em 是一个相对单位，会受到父元素字体大小的影响。

示例 4：font-size 取值为 rem 值

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        html {
            font-size: 16px;     /* 设置根元素的字体大小 */
        }
        div {
            font-size: 20px;
        }
        p {
            font-size: 1.5rem;   /* 相对于根元素字体大小 */
        }
    </style>
</head>
<body>
    <div>
        绿叶网 - 为好教程，全力以赴。
        <p class="rem-size">绿叶网 - 为好教程，全力以赴。</p>
    </div>
</body>
</html>

页面效果如下图所示。

font-size取值为rem值

分析：

在这个例子中，根元素（<html>）的字体大小设置为 16px。虽然父元素的字体大小被设置为 20px，但使用 rem 单位的文本字体大小是相对于根元素的字体大小，所以其字体大小为 16px * 1.5 = 24px。

需要清楚的是，rem 单位是相对于根元素而言的，它非常适合用于构建响应式布局。

深入了解 font-size

对于 font-size 属性的使用，小伙伴们还需要特别清楚以下几点。

主流浏览器（包括 Chrome、Edge、Firefox 等）的默认字体大小都是 16px。
Chrome、Edge等 Chromium 内核浏览器的最小字体大小都是 12px，即使你设置的值小于 12px（比如 10px、8px 等），浏览器最终可能也是使用 12px 来显示。
实际开发使用的字体大小尽量使用偶数，比如 12px、14px、16px 等。