效果
可以看到继承的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的问题，以及产生的原因，和它们解决的办法。
- 怎么设置比最小字号更小的字号，并能够让页面实际渲染出来？
比如这段代码：
<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函数，看下效果：
