解决Google浏览器不支持12px以下的字体大小的问题,有时设定了12PX,可在浏览器看时确不起作用
网络出现内核的浏览器有微软的Internet Explorer, Mozilla的Firefox, Apple的Safari, Opera, Google Chrome,今天看兼容发现Opera 跟Google Chrome的浏览器不能根据定义的字号变小。 目前Opear的问题还是没能解决,Chrome浏览器可算是解决了那BUG了。这个不知道算不算Chrome的BUG,有人说他是人家臣Chrome的 人性化设置,因为小于12px的文字会比较难看得清楚,不过有时项目需要设置小于12px的文字大小。
Google Chrome竟然最小的字体是12px,而小于12px的数值,百分比之类的都不起左右,都是显示12px,这是一个由来已久的Chrome浏览器的问 题,不知为何一直存在到现在,主要是其内核Webkit造成的。网上有很多解决的方法,类似有将浏览器语言调整至英文,或者修改Chrome本地设置。但 这些解决方法都是治标不治本的。如果你和我一样是网页开发人员为了这个12px的问题头疼,但又不能控制用户的浏览器语言或者修改其本地设置。
接下来带来一个万无一失的解决方式,保证100%可用,在CSS中设置:
-webkit-text-size-adjust: none;
(这段话可以加在body中,也可以单独加在具体样式中。)
来看看效果吧 注意:需要在 谷歌Chrome 浏览器下测试
未加样式
Font Size:8px;
Font Size:9px;
Font Size:10px;
Font Size:11px;
Font Size:12px;
Font Size:13px;
Font Size:14px;
Font Size:15px;
已加样式
Font Size:8px;
Font Size:9px;
Font Size:10px;
Font Size:11px;
Font Size:12px;
Font Size:13px;
Font Size:14px;
Font Size:15px;
即取消webkit的对文字的自动调整,这样的话,CSS中font-size多少大,就多少大,完全无需考虑Chrome的12px死亡线了。另外这个 CSS设置同时还纠正了网页在iPhone和iTouch上浏览网页时同样出现的字体错误,真是一举多得啊。
备注:万无一失的办法我尝试过的,好像没有效果。
有时候别人断章取义,也没办法。不想吵,不想解释。