2011-08-16

Chrome下不能显示小于12px的字体的解决方案

0

在中文版Chrome里面,网页CSS里所有小于12px的字体设置都无效,小于12px的数值,百分比之类的都不起左右,最终都将显示12px。

这是一个由来已久的Chrome浏览器的问题,不知为何一直存在到现在,主要是其内核Webkit造成的。这样弄的本意可能是好的,因为中文一旦小于12px,就变得不易阅读。网上有很多解决的方法,类似有将浏览器语言调整至英文,或者修改Chrome本地设置。但这些解决方法都是治标不治本的。

如此一来,中文网页中的英文也无法设计小于12px了,在一些文字部份的设计,不小实在不好看,影响整个排版的美观,如果你和我一样是网页开发人员为了这个12px的问题头疼,但又不能控制用户的浏览器语言或者修改其本地设置。
接下来带来一个万无一失的解决方式,保证100%可用。

中文版Chrome下设置小于12px的字体的解决方案

在CSS里添加一个私有属性到html选择器:

html { -webkit-text-size-adjust: none; }

顾名思义,禁用Webkit内核浏览器的文字大小调整功能。这样的话,CSS中font-size就要以自由设定,完全无需考虑Chrome的12px死亡线了。

这段话可以加在body中,也可以单独加在具体样式中应用。

此外这个CSS设置同时还纠正了网页在iPhone和iTouch上浏览网页时同样出现的字体错误,一举多得,建议加入CSS Reset。