不知道你有没有遇到这样的情况，设置了font-size为10px，打开控制台审查元素也显示的是10px，但浏览器渲染的字体大小还是没有发生改变。
这是因为浏览器（以Chrome为例，其他没测试过）在中文语言下展示的最小字体是12px，低于12px的，都会当作12px处理。
这里提到的中文语言，跟页面上展示的内容没有什么关系，而是取决于用户在chrome://settings/languages中设置的默认语言。
如果要在浏览器解决这个问题，有两种方案：
方法一
使用?transform: scale()?缩放属性来实现。例如：
// 缩放到0.8倍 transform: scale(0.8);但这个方法有一个弊端：文字大小确实被缩放了，但是元素占据的位置大小却没有改变。
简单的说，就是元素的宽度和高度并没有发生变化。
如果还不明白，看一下这两个图的对比：
图一 缩放前
图二 缩放后?
?页面展示的文字确实已经被缩放了，但div实际占据的位置大小还是没有发生改变的。
方法二
在浏览器chrome://settings/fonts里面设置最小字体即可。
当然，如果不是自己用建议不要使用这种方式。毕竟，我们不能让每个用户都自己去设置一遍，再者，这里只是针对chrome浏览器。
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签： #Sc
