这是我参与11月更文挑战的第23天，活动详情查看：2021最后一次更文挑战
背景
学习前端三个月了，准备刷刷面试题，总结总结，一天几道面试题，向大厂进军。
Chrome 支持的最小字体大小是多少？
这个问题相信很多工作多年的前端老炮都不了解？
我们跑个代码来试试：
<style>
.test3-center {
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
color: #fff;
background: red;
}
.test1 {
font-size: 12px;
}
.test2 {
font-size: 8px;
}
</style>
</head>
<body>
<div class="test3-center">
<h1>12px字体</h1>
<div class="test1">测试中文字体大小</div>
<h1>8px字体</h1>
<div class="test2">测试中文字体大小</div>
</div>
<div class="test3-center">
<h1>12px字体</h1>
<div class="test1">hello world</div>
<h1>8px字体</h1>
<div class="test2">hello world</div>
</div>
</body>
来看看最终效果图：
从上面效果我们可以看出Chrome有支持的最小字体大小，我们可以看到chrome浏览器中，12px无论中文还是英文，与8px的字体表现是一致的。
原因
Chrome 中文版浏览器会默认设定页面的最小字号是12px，英文版没有限制
原因是：Chrome 团队认为汉字小于12px就会增加识别难度。
怎么区分是中文本浏览器呢？？
- 中文版浏览器
与网页语言无关，取决于用户在Chrome的设置里把哪种语言设置为默认显示语言。我尝试了一下，好像无法修改默认语言。
如何让Chrome支持更小的字体呢？
这个时候，有些同学就会说，这个简单，要Chrome支持最小字体，我们只需要修改浏览器的设置，如下
这样就可以了，来看看效果：
确实生效了，但是再我们的实际项目中，我们不能奢望用户去更改浏览器的设置。
那对于设计要求我们必须显示更小的字号，这个我们又该怎样去做呢？？
我们常见的解决方案有以下三种：
- zoom
- -webkit-transform:scale()
- -webkit-text-size-adjust:none
Zoom
zoom 这个大家常用，可以改变页面元素的尺寸，属于真实尺寸。
其实并没有生效。字体大小还是12px。
-webkit-transform:scale()
我们用transform:scale()这个属性进行放缩
注意的是，使用scale属性只对可以定义宽高的元素生效，所以，如果是span标签，则需要转换为行内块元素。
-webkit-transform:scale() 可以显示最小的字号，但是不会改变元素占据的空间大小，页面布局也不会发生变化。
-webkit-text-size-adjust:none
该属性用来设定文字大小是否根据设备(浏览器)来自动调整显示大小
需要注意的是，自从
chrome 27之后，就取消了对这个属性的支持。同时，该属性只对英文、数字生效，对中文不生效
总结
如果真的有这种需要缩放特别小的字体的话，-webkit-transform:scale()应该是一个不错的选择。
结语
一步一步慢慢来，踏踏实实把活干！
