前言: 由于谷歌的浏览器策略,chorme 的默认字体是 16px,最小字体是 12px(根据语言情况而定), 谷歌认为 12px 以下的中文对人是不友好的,所以低于 12px 的字体,一律为 12px。当然,设置为 font-size: 0。仍是可以的。
具体设置可在:chrome://settings/fonts 中查看。
实际应用中,不可能让用户自己主动去更改设置,所以只能采取一些曲线救国的方式。

 

方法 1:zoom

 

zoom: 变焦

 

通过设置元素 css 的 zoom 来改变字体的大小。

 

如:
font-size: 12px
zoom: 0.8

 

 

大概就是 10px 了

 

方法 2:-webkit-transform:scale()

 

与 transfrom: scale 一样,只不过只针对 webkit 内核。
注意:使用 scale 属性只对可以定义宽高的元素生效,所以需将元素转为行内块元素
        font-size: 12px;
        display: inline-block;
        -webkit-transform:scale(0.8);

 

二者差别:

单从效果看,没啥差别,值得注意的是,zoom 不是标准属性,需要考虑浏览器兼容性,而-webkit-transform:scale 只针对-webkit 内核。

 

在 chrome29 以前,仍可以使用-webkit-text-size-adjust:none来解决这个问题,这个设置为不跟随浏览器的配置来设置字体。这样会导致缩放时候,字体不会跟随浏览器而改变,在chorme29已经被移除。