如何实现chrome浏览器上小于12px文字
1. Zoom 非标属性,有兼容问题,缩放会改变了元素占据的空间大小,触发重排
2. transform:scale() 大部分现代浏览器支持,并且对英文、数字、中文也能够生效,缩放不会改变了元素占据的空间大小,页面布局不会发生变化
3. text-size-adjust对谷歌浏览器有版本要求,在27之后,就取消了该属性的支持,并且只对英文、数字生效
<style>
p{
display: inline-block;
font-size: 10px;
}
.little{
transform: scale(0.8);
/* zoom: 80%; */
}
/* html{
text-size-adjust: none;
} 没作用 */
</style>
</head>
<body>
<p class="little">10px</p>
<p class="big">12px</p>
</body>