CSS之font-size的说明与妙用

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。看下效果：

larger同理，并且把px换成其他单位也是一样的效果。

对于长度值指定的字号，我们也可以设定为相对或者绝对，像px、pt等就属于绝对长度值的字号，不受其他影响，而em这种就属于相对长度值，会收到层级深度影响：

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

我们设定子孙元素的字号都为1.1em，这样属性就会逐层影响，其中这里的1em就相当于是18px，先看效果：

可以看到，子层级的字号为18px1.1=19.8px，孙层级的字号为19.8px1.1=21.78px。

同样百分比值也受到层级的影响：

<div style="font-size: 20px;">测试font
    <div style="font-size: 150%;">测试font
      <div style="font-size: 50%;">测试font</div>
    </div>
</div>

那么子层级的字号为20px1.5=30px，孙层级的字号为30px0.5=15px：

至于数学值，目前没必要了解，这里大概简单给个例子：

<div style="font-size: 20px;">测试font
    <div style="font-size: math; math-depth: 1;">测试font
      <div style="font-size: math; math-depth: 2;">测试font</div>
    </div>
    <div style="font-size: math; math-depth: 2;">测试font</div>
    <div style="font-size: math; math-depth: -1;">测试font</div>
</div>

这个外层div就相当于我们之前说的顶级容器，所有的深度都是基于这个顶级容器来计算的，深度值越大，相对于顶级容器来说字号越小，这个行为与层级无关，只与设定的深度有关，而且可以设置为负值，那么字号就会基于顶级容器放大，看下效果：

可以看到，第二行文字深度为1，因此缩小，第三行文字深度为2，就变得更小，第四行文字虽然层级比第三行高，但是同属于一个深度，因此字号相同，第五行设置为-1，那么字号就会变得比顶级容器还要大。

对于全局值来说，适用于每一个css属性，这里不展开，只是大概说明一下容易弄混的地方，以及它们之间的区别，我们以h1标签来进行举例说明：

<div>测试font
    <h1>测试font</h1>
</div>

html代码的结构很简单，默认div中的字号大小就是基础字号的大小，也就是16px，而h1标签有用户代理样式：

因此h1中的字号大小就是16px*2=32px。看下效果

这时，如果我们给div设置一个20px的字号，那么h1的字号也就跟着变成了40px。

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

再看下效果图：

我们先给h1的字号设置为initial：

已经看到， h1的字号已经初始化为基础字号的大小。

我们再给h1的字号设置为revert：

可以看到继承的20px字号已经生效了，而且用户代理的字号2em也生效了，虽然我们设置为了revert，覆盖了浏览器的2em：

但是revert这个关键字又明确表明了要恢复，因此用户代理的这个样式又会重新生效。

我们再给h1的字号设置为unset：

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

我们这次通过两个h1来对比一下：

可以看到，虽然被unset了，但是还是能够继承父级的字号属性的，这时用户代理样式就不会生效了。

问题与妙用

接下来我们就介绍一下实际项目中遇到的关于font-size的问题，以及产生的原因，和它们解决的办法。

1. 怎么设置比最小字号更小的字号，并能够让页面实际渲染出来？

比如这段代码：

<div>测试font
    <div style="font-size: 12px;">测试font</div>
    <div style="font-size: 10px;">测试font</div>
</div>

第一个子元素设置为12px的字号，第二个子元素设置为10px的字号，这时看起来是这样的：

会发现，第二行和第三行的字体显示的一样的大小。

如果最小字号为12px，那么即使你在页面中给元素指定了font-size:10px，实际渲染的字号大小也会是12px，针对这种情况，我们可以使用zoom属性来配合一下：

<div>测试font
    <div style="font-size: 10px;">测试font</div>
    <div style="font-size: 10px;zoom: calc(5/6);">测试font</div>
</div>

我们将第一个子元素字号大小设置为10px，第二个子元素字号大小设置为10px，并设置一个zoom属性，zoom主要就是用来缩放的。

由于最小字号是12px，我们想要显示10px，因此需要缩小到10px/12px=5/6≈0.8333，因此也可以设置为zoom: 0.8333，我这里为了精确使用了calc函数，看下效果：

我们也可以换一种设置方式，比如"font-size:20px;zoom:0.5;"也是可以的，也能达到显示10px文字的效果，其他更小字号同理。不太建议使用transform配置scale来实现，操作比较复杂，改起来费劲。

2. 我的文字之间为什么有空隙，两个span标签不挨着，两个图片中间有空白条？

这个其实主要都是由于行内元素和行内块元素引起的，比如我们有这样一个结构：

<div style="background-color: coral;">
    <span style="background-color: darkorchid;">测试font</span>
    <span style="background-color: greenyellow;">测试font</span>
</div>

div中包裹着两个span，分别设置成不同的颜色，效果如下：

能够发现，我只是给一段文字拆成两部分，然后分别用span设置不同的背景色，其他的什么内容都没有，两个span中间为什么出现了空隙，该怎么解决呢。

其实就是因为解析行内元素的时候，两个span标签中间空白的地方被解析成了空格，因此就会产生间隙的现象，那么我们只要把空白地方删掉就可以了：

<div style="background-color: coral;">
    <span style="background-color: darkorchid;">测试font</span><span style="background-color: greenyellow;">测试font</span>
</div>

这样让它俩挨着就行了：

但是这样做不太好，代码也不美观，下次再格式化，问题又出现了，这个时候就可以使用我们的font-size来处理这个问题了，不是有空格嘛？空格的大小也跟字号有关，那我把它设置为0，不就不显示了嘛：

<div style="font-size: 0px;background-color: coral;">
    <span style="font-size: 16px;background-color: darkorchid;">测试font</span>
    <span style="font-size: 16px;background-color: greenyellow;">测试font</span>
</div>

这时我们就发现，想要的效果已经出来啦：

而且从这可以看出，虽然浏览器默认最小字号是12px，我们不能设置10px、8px等的数值，但是可以设置0px，来隐藏文字。

图片的问题也是同理，都可以通过这种方式来解决。

最后

font-size可设置的值虽然有很多种，但是我们经常使用的也就几个。需要结合自身的场景来搭配使用px、pt、em、rem、百分比、相对值等。