1,问题描述
(1)Chrome 浏览器有最小字体大小 12px 的限制,也就是说如果设置一个小于 12px 的文字,那么最终显示出来的效果仍然是 12px。下面是一个简单的样例:
1 2 3 4 5 6 7 8 | < 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。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | < 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)运行效果如下: