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>