CSS3 - 解决Chrome谷歌浏览器最小只能显示12px文字的问题
作者：hangge | 2019-12-23 08:10
1，问题描述
（1）Chrome 浏览器有最小字体大小 12px 的限制，也就是说如果设置一个小于 12px 的文字，那么最终显示出来的效果仍然是 12px。下面是一个简单的样例：
<div style="font-size: 15px">15px的文字</div> <div style="font-size: 14px">14px的文字</div> <div style="font-size: 13px">13px的文字</div> <div style="font-size: 12px">12px的文字</div> <div style="font-size: 11px">11px的文字</div> <div style="font-size: 10px">10px的文字</div> <div style="font-size: 9px">9px的文字</div> <div style="font-size: 8px">8px的文字</div>
（2）运行效果如下，可以看到小于 12px 的文字最终显示出来的大小都是一样的（12px）：
2，解决办法
（1）我们可以借助 css3 中的 -webkit-transform:scale(num) 来对文字进行缩小了解决这个问题，其中 num 是设置的“字体大小/12px”。比如想要显示 8px 的文字，则 num=8/12=0.67。
（2）运行效果如下：
<div style="font-size: 15px">15px的文字</div>
<div style="font-size: 14px">14px的文字</div>
<div style="font-size: 13px">13px的文字</div>
<div style="font-size: 12px">12px的文字</div>
<div style="font-size: 12px;-webkit-transform-origin-x: 0;-webkit-transform: scale(0.92);">
11px的文字
</div>
<div style="font-size: 12px;-webkit-transform-origin-x: 0;-webkit-transform: scale(0.83);">
10px的文字
</div>
<div style="font-size: 12px;-webkit-transform-origin-x: 0;-webkit-transform: scale(0.75);">
9px的文字
</div>
<div style="font-size: 12px;-webkit-transform-origin-x: 0;-webkit-transform: scale(0.75);">
8px的文字
</div>
（2）运行效果如下：
全部评论（0）