改变浏览器最小字号的限制

不知道大家有没有遇到过这种情况？就是我们想把一个字体改变的很小，但是发小调小到一定程度以后就不会发生变化了，这是因为不同的浏览器有一个最小字号的限制，当我们把字体缩小到小于浏览器默认值以后，就一直保持浏览器的最小字体，不再改变，这种情况如何解决呢？（谷歌浏览器默认最小字号是12px）

一个非常不成熟的想法就是修改浏览器的默认值，这种方法只对你自己的浏览器生效，在别人那里照样还是不可以的，所以这种想法是不正确的。

下面是简单的一段代码，目的是让大家更清除的了解最小字号限制的这个现象是怎样的。

前两张图是我们自己设置的字号大小，大家可以清除的看到字体的大小

这个是我们调到浏览器默认最小值字号的字体大小，大家可以留意一下当前的字体大概的大小，以便于下面的观察。

这是修改未10px的字体大小的字号，我们可以明显感觉出这字体好像并没有明显的变动。

这是设置为8px大小的字号，这样更加直观的描述我们的问题了。

下面介绍一个解决方法：transform: scale()，scale()参数小数表示缩小。

从上图中我们明显感觉到比12px要小了很多，这是css3中缩放的知识点来实现的。另外，可能大家还发现，缩放以后我们的文字跑到中间了，这是因为我们的缩放是以中心点进行缩放的，所以我们最后调整一下。

用 transform-origin: left;属性可以改变缩放元素的位置。具体大家可以参考CSS transform-origin 属性 (w3school.com.cn)