用于设置网页文字大小属性的是,怎么设置浏览网页字体大小

效果

可以看到继承的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函数，看下效果：