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)