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

by kevin 16. 十二月 2013 14:15 >

最近在改版65emall的时候,碰到一个很棘手的问题,Chrome浏览器有个最小字号设置,就是当字号小于最小字号时,就会自动调整为自动调整为最小的字号。如下图:

20131216133437

在中文版的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: }

注意一下

  1. 为了能同时兼容中英文Chrome,10号,11号也要这样缩小
  2. 这个比例不是简单的等比例缩小,比如9号字,的缩放比例就不是0.75

另外需要注意的一点是,长度,高度,还是会按照10或者12号字来计算,所以,最好在外层在加个div作为容器。

   1: <div>
   2: <div class="font-size9">font-size:9px</div>
   3: </div>
分享到: 更多