在项目中，按照设计稿的样式设计页面，有些字体需要小于12px，在移动端可以正常显示，但是在pc端的谷歌浏览器就出现字体大小不变导致，页面排列出现差异。因此要让谷歌浏览器支持小于12px字体的显示，需要一些方式处理这种情况
1、背景
Chrome 为了更好显示中文设计的，认为人眼最小最舒服的字体识别是12px，小于12px的字体将会引起不适，所以小于12px的字大小强制还是显示12px的大小。
2、处理方式
- 1、通过更改浏览器字体最小号设置，设置需要满足的最小字号就行，在谷歌浏览器中输入chrome://settings/fonts 进行配置
- 2、使用
transform中的scale进行缩放。
<div style="width: 200px;height: 100px;font-size: 10px">默认仍然显示12px字体</div>
<div style="width: 200px;height: 100px;font-size: 10px;transform: scale(0.5);">更小字体</div>
- 3、
zoom可以改变页面上元素的真实尺寸，但是需要注意reset属性值的兼容性。
<div style="width: 200px;height: 100px;font-size: 10px">默认仍然显示12px字体</div>
<div style="width: 200px;height: 100px;font-size: 10px;zoom:0.5;">更小字体</div>
- 4
zoom与scale，查看上面两个结果，差异如下：- a、zoom缩放后，仍然处于原来位置，而scale 变成了居中缩放(
transform-origin: 0 0; 可以解决居中问题) - b、zoom缩放改变了元素真实大小，而scale的原始尺寸大小不变，页面布局不发生变化
- c、zoom缩放会改变了元素占据的空间大小，而触发重排。scale只会引起重绘。
- a、zoom缩放后，仍然处于原来位置，而scale 变成了居中缩放(
