做前端的基本都知道 chrome谷歌浏览器下字号一旦小于12px的时候，都会显示12px，这是一个很早就存在的问题了，原因是谷歌是一家很注重用户体验的公司，旗下浏览器chrome也不例外。

在他们看来，中文字体一旦小于12px就会影响阅读，所以我们终于知道这不是谷歌的bug，是他们特意为之的。

那么有些个别的情况，一定要小于12px，该怎么办呢？

有一个方法就是给当前样式添加谷歌私有属性：

-webkit-text-size-adjust:none;

但是随着chrome的更新，这个已经不能有效了，于是又有了下面的针对chrome的css hack。

@medias creen and(-webkit-min-device-pixel-ratio:0){

-webkit-transform:scale(0.8);

}

随着版本的更新，这个又用不了了。

无奈

最后用了1个小时写了终极方案，不管在如何升级它都是有效的，经过反复测试有效，基于jquery。

//判断是否chrome

var isChrome = window.chrome == undefined ? false : true;
//方法
$(function(){
  if(isChrome){
    $('.chrome').each(function(){
      var obj = $(this);
      var fs = obj.data('fs');
      obj.css({'font-size':'12px', '-webkit-transform':'scale('+ fs/12 +')'});
    })
  }
})

使用

<h1 class="chrome" data-fs="8">切图网是专门做h5前端的公司</h1>

data-fs="8" 是字号为8px的意思。

---

切图网 www.qietu.com 原创，专注psd转html5等前端开发。