开发杂记:如何处理google chrome最小字号的问题

by kevin 16. 十二月 2013 14:15 >
最近在改版65emall的时候,碰到一个很棘手的问题,Chrome浏览器有个最小字号设置,就是当字号小于最小字号时,就会自动调整为自动调整为最小的字号。如下图: 在中文版的Chrome中,默认的最小字号是12; 在英文版的Chrome中,默认的最小字号是10。 1: -webkit-text-size-adjust:none; 网上很多都建议使用上面这样的语法来实现,但在高版本的Chrome中,这个语法已经无效了。 所以使用 -webkit-transform: 代码如下: 1: .font-size8 { font-size: 8px;} 2: .font-size9 {font-size: 9px;} 3: .font-size10 {font-size: 10px;} 4: @media screen and (-webkit-min-device-pixel-ratio:0) { 5: .font-size8 { 6: font-size: 12px; 7: margin-top: 1px; 8: -webkit-transform: scale(0.83); 9: } 10: .font-size9 { 11: font-size: 12px; 12: margin-top: 2px; 13: -webkit-transform: scale(0.86); 14: } 15: .font-size10 { 16: font-size: 12px; 17: margin-top: 2px; 18: -webkit-transform: scale(0.92); 19: } 20: } 注意一下 为了能同时兼容中英文Chrome,10号,11号也要这样缩小 这个比例不是简单的等比例缩小,比如9号字,的缩放比例就不是0.75 另外需要注意的一点是,长度,高度,还是会按照10或者12号字来计算,所以,最好在外层在加个div作为容器。 1: <div> 2: <div class="font-size9">font-size:9px</div> 3: </div>

打赏请我喝果汁咯

支付宝 微信

关于我

80后,单身,平庸的程序员。

喜欢看书,乐于交友,向往旅游。

遇建Kevin

FluentData交流群:477926269

Fluentdata