效果
我们也可以换一种设置方式，比如"font-size:20px;zoom:0.5;"也是可以的，也能达到显示10px文字的效果，其他更小字号同理。不太建议使用transform配置scale来实现，操作比较复杂，改起来费劲。
- 我的文字之间为什么有空隙，两个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、百分比、相对值等。
,
