chorme 设置字体小于 12px 的方法

 

前言: 由于谷歌的浏览器策略，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已经被移除。