让Chrome支持小于12px 的文字方式有哪些？
2021-08-17 本文已影响0人
小李不小
常见的解决方案有：
- zoom
- -webkit-transform:scale()
- -webkit-text-size-adjust:none
Zoom
zoom 的字面意思是“变焦”，可以改变页面上元素的尺寸，属于真实尺寸
其支持的值类型有：
- zoom:50%，表示缩小到原来的一半
- zoom:0.5，表示缩小到原来的一半
使用 zoom 来”支持“ 12px 以下的字体
代码如下：
<style type="text/css">
.span1{
font-size: 12px;
display: inline-block;
zoom: 0.8;
}
.span2{
display: inline-block;
font-size: 12px;
}
</style>
<body>
<span class="span1">测试10px</span>
<span class="span2">测试12px</span>
</body>
效果如下：
image.png
