让Chrome⽀持⼩于12px 的⽂字⽅式有哪些？区别？
1、背景
Chrome 中⽂版浏览器会默认设定⻚⾯的最⼩字号是12px，英⽂版没有限制 原由 Chrome 团队认为汉字⼩于12px就会增加识别难度
• 中⽂版浏览器 与⽹⻚语⾔⽆关，取决于⽤户在Chrome的设置⾥（chrome://settings/languages）把哪种语⾔设置 为默认显⽰语⾔
• 系统级最⼩字号 浏览器默认设定⻚⾯的最⼩字号，⽤户可以前往 chrome://settings/fonts 根据需求更改 ⽽我们在实际项⽬中，不能奢求⽤户更改浏览器设置 对于⽂本需要以更⼩的字号来显⽰，就需要⽤到⼀些⼩技巧
2、 解决⽅案
常⻅的解决⽅案有：
• zoom
• -webkit-transform:scale()
• -webkit-text-size-adjust:none
2.1 Zoom
zoom 的字⾯意思是“变焦”，可以改变⻚⾯上元素的尺⼨，属于真实尺⼨ 其⽀持的值类型有：
• zoom:50%，表⽰缩⼩到原来的⼀半
• zoom:0.5，表⽰缩⼩到原来的⼀半
使⽤ zoom 来”⽀持“ 12px 以下的字体
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小于12px文字</title><style type="text/css">.span1 {font-size: 12px;display: inline-block;zoom: 0.8;}.span2 {display: inline-block;font-size: 12px;}</style>
</head><body><span class="span1">测试10px</span> <span class="span2">测试12px</span>
</body>
</html>
效果如下：
需要注意的是， Zoom 并不是标准属性，需要考虑其兼容性
2.1 -webkit-transform:scale()
针对 chrome 浏览器,加 webkit 前缀，⽤ transform:scale() 这个属性进⾏放缩 注意的是，使⽤ scale 属性只对可以定义宽⾼的元素⽣效，所以，下⾯代码中将 span 元素转为⾏ 内块元素
实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小于12px文字</title><style type="text/css">.span1 {font-size: 12px;display: inline-block;-webkit-transform:scale(0.8);}.span2 {display: inline-block;font-size: 12px;}.span3 {display: inline-block;font-size: 14px;}</style>
</head><body><span class="span1">测试10px</span> <span class="span2">测试12px</span><span class="span3">测试14px</span>
</body>
</html>
效果如下：
2.1 -webkit-text-size-adjust:none
该属性⽤来设定⽂字⼤⼩是否根据设备(浏览器)来⾃动调整显⽰⼤⼩
属性值：
• percentage：字体显⽰的⼤⼩；
• auto：默认，字体⼤⼩会根据设备/浏览器来⾃动调整；
• none:字体⼤⼩不会⾃动调整
html { -webkit-text-size-adjust: none; }
这样设置之后会有⼀个问题，就是当你放⼤⽹⻚时，⼀般情况下字体也会随着变⼤，⽽设置了以上代 码后，字体只会显⽰你当前设置的字体⼤⼩，不会随着⽹⻚放⼤⽽变⼤了
所以，我们不建议全局应⽤该属性，⽽是单独对某⼀属性使⽤
需要注意的是，⾃从 chrome 27 之后，就取消了对这个属性的⽀持。同时，该属性只对英⽂、数字 ⽣效，对中⽂不⽣效
3.、总结
Zoom ⾮标属性，有兼容问题，缩放会改变了元素占据的空间⼤⼩，触发重排
-webkit-transform:scale() ⼤部分现代浏览器⽀持，并且对英⽂、数字、中⽂也能够⽣效， 缩放不会改变了元素占据的空间⼤⼩，⻚⾯布局不会发⽣变化
-webkit-text-size-adjust 对⾕歌浏览器有版本要求，在27之后，就取消了该属性的⽀持，并 且只对英⽂、数字⽣效
