font-size属性，用来设置页面中字体的大小，是css中最常用的属性之一，也叫字号，我们总是在一个页面里面用到各种不同的字号。

它的值可以使用多种方式来指定，非常的灵活：

（注：这里会用到基础字号与最小字号的两个概念，具体含义我们接下来会用示意图进行解释）

一、绝对值

设置为绝对值的字号，只会跟基础字号有关，与所属层级深度无关，也就是说基础字号不变，那么它们所修饰的字号也不会改变，无论是large还是small都是以基础字号为基准放大或缩小的。它们有一套计算规则，但是最小也不会低于12px。

1. xx-small：指定字号为基础字号的五分之三大小
2. x-small：指定字号为基础字号的四分之三大小
3. small：指定字号为基础字号的0.89倍大小
4. medium：为用户默认字体大小的关键字，也就是基础字号，其他属性也是基于这个计算的
5. large：指定字号为基础字号的1.2倍大小
6. x-large：指定字号为基础字号的1.5倍大小
7. xx-large：指定字号为基础字号的2倍大小
8. xxx-large：指定字号为基础字号的3倍大小

其中small在字号较小时，会有一点不同的行为，基础字号为16px或者15px时，small表现为13px，基础字号为14px以及以下的时候，small表现为12px。

二、相对值

设置为相对值的字号，会根据默认的字号或者继承的字号等相应的放大或者缩小，会根据层级的深度而做相对变化。同样最小值也不会低于12px。

1. smaller：指定字号为本来字号除以1.2之后的值
2. larger：指定字号为本来字号乘以1.2之后的值

它们的值都跟计算的方式无关，也就是说无论继承的字号是通过px、pt、em、rem还是百分比等方式指定的，都是同样的全部通过1.2来计算放大或者缩小之后的值。

三、长度值

可以通过指定一个数值与一个长度单位来将字号设置为长度值，换句话说，只要可以指定为长度的值，都可以用来设定字号的大小。由于种类太多，这里只列举几个常用的。

1. px：以像素为单位，指定字体大小
2. pt：以磅为单位，指定字体大小，1pt=(4/3)*1px
3. em：指定当前字号为上级字号的多少倍，如为父元素字号的2倍，那么就是2em
4. rem：指定当前字号相当于根元素字号的倍数

甚至可以设置为视口宽度的值，如1vw。可以看出，长度值也分为绝对值与相对值。并且用这种方式设置的字号，最小值为最小字号，而不一定是12px。

四、百分比值

我们可以根据父元素设定的字号，通过百分比来相对的设定当前的字号。

1. %：指定当前字号为继承字号的百分之多少，会相对变化。

通过百分比设定的字号，最小值也不一定是12px，以最小字号为准。

五、数学值

如果设定字号为数学值，那么就可以通过数学的缩放规则来控制字号的大小。

1. math：使用数学的方式，对字体进行缩放

在数学值里面有一个顶级容器的概念，也就是在这个容器里面，所有的数学值都是基于容器的字号来计算的，它可以指定负值。

六、全局值

1. inherit：从父元素继承字号大小
2. initial：初始化为基础字号大小
3. revert：恢复字号大小，也就是说有继承就继承，没继承就是浏览器默认值，用户代理字号也会生效
4. revert-layer：根据层级的设定来逐层恢复字号大小，这个需要@layer关键字相关的知识
5. unset：不指定字号大小，也就是说有继承就继承，没继承就是浏览器默认值，但是也会清除用户代理样式

刚才我们不断的提到基础字号和最小字号，因为给字号设定值的时候很多种情况都与这两个值有关，它是从哪来的呢？能不能被改变？

以谷歌浏览器为例，我们可以这样找到它：找到浏览器右上角→选择设置→点击外观，我们能在下方看到自定义字体的栏目：

自定义字体

点击它，我们就可以设置默认值：

字号

可以看到基础字号默认就是16px，而最小字号默认就为12px。

可以修改这两个数值，来改变页面的字号行为，但是一般情况下我们是不会修改它们的。即使遇到问题，也是通过其他的手段来解决。

上面列举了那么多的设置字号的方法，简单的通过几个示例，来看一下它们的工作方式：

为了看的更清晰，直接使用内敛样式，以x-small为例：

<div style="font-size: 20px;">测试font <div style="font-size: x-small;">测试font <div style="font-size: x-small;">测试font</div> </div> </div>

由于x-small为基础字号的四分之三，而我们的基础字号又是16px，因此x-small修饰的字号就为16px*3/4=12px。它们不受层级和继承的影响。看下效果

效果

第一行显示为20px，后两行显示为12px。其他的绝对值字号同理。

我们换为相对值再看下：

<div style="font-size: 18px;">测试font <div style="font-size: smaller;">测试font <div style="font-size: smaller;">测试font</div> </div> </div>

这次为了好计算，我们把父元素的字号设为18px，根据smaller的计算规则，那么子元素的字号就为18px/1.2=15px。由于是相对值，收到层级深度的影响，孙元素的字号就为15px/1.2=12.5px。看下效果：