CSS 字体大小 - 绿叶网

在 CSS 中，我们可以使用 font-size 来定义字体的大小。

语法：

font-size: 关键字 ;
font-size: 数值 ;

说明：

font-size 的取值有 2 种。

关键字：取值有 xx-small、smaller、medium、small、large、larger、x-large、xx-large 等，默认值为 medium。
数值：可以是像素值（px）、百分比（%）、em、rem、vw 和 vh 等。
- px（像素）：绝对单位，直接指定字体大小为多少像素。
- %（百分比）：相对于父元素的字体大小。
- em：相对于当前元素自身的字体大小。
- rem：相对于根元素（html）的字体大小。使用 rem 可以方便地实现响应式布局。
- vw：相对于视口宽度的 1%。
- vh：相对于视口高度的 1%。

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

示例 1：CSS 字体大小取值为 “关键字”

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .p1 { font-size: xx-small; }
        .p2 { font-size: x-small; }
        .p3 { font-size: smaller; }
        .p4 { font-size: small; }
        .p5 { font-size: medium; }
        .p6 { font-size: large; }
        .p7 { font-size: larger; }
        .p8 { font-size: x-large; }
        .p9 { font-size: xx-large; }
    </style>
</head>
<body>
    <p class="p1">字体大小为：xx-small</p>
    <p class="p2">字体大小为：x-small</p>
    <p class="p3">字体大小为：smaller</p>
    <p class="p4">字体大小为：small</p>
    <p class="p5">字体大小为：medium（默认值）</p>
    <p class="p6">字体大小为：large</p>
    <p class="p7">字体大小为：larger</p>
    <p class="p8">字体大小为：x-large</p>
    <p class="p9">字体大小为：xx-large</p>
</body>
</html>

页面效果如下图所示。

CSS 字体大小取值为 “关键字”

示例 2：CSS 字体大小取值为 “px 值”

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .p1 { font-size: 12px; }
        .p2 { font-size: 14px; }
        .p3 { font-size: 16px; }
    </style>
</head>
<body>
    <p class="p1">字体大小为：12px</p>
    <p class="p2">字体大小为：14px</p>
    <p class="p3">字体大小为：16px</p>
</body>
</html>

页面效果如下图所示。

CSS 字体大小取值为 “px值”

分析：

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

深入了解 font-size 属性

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

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

可能有小伙伴会问：“万一我真的需要使用 10px 的字体，此时怎么办？” 我们可以使用 transform: scale(0.8) 来缩放实现。