CSS解决Chrome浏览器限制使用12px以下字体的问题

By柏小白

CSS解决Chrome浏览器限制使用12px以下字体的问题

在谷歌的浏览器Chrome中有一个奇怪的问题,页面上小于12px的字都以12px显示。

在其它浏览器中都没有此问题,不知道是谷歌真没发现这个bug,还是谷歌为了考虑到chrome的用户体验,故意把字号限制到最小12px ?

我看了那么多网站,应用10px或其它小于12px字号的站还真不多见,大多出现在全英文的网站上,因为10px的字母看着也算清晰,即使清晰,我也觉得没必要搞个10px的字,那么地小,节约页面空间?布局美观?还是为了排版需要?这也太狭义了吧。。。

然而,事实上小于12px的汉字看的眼睛胀痛,笔画多点的根本不能识别,那就更不应该应用10px的字了。能清晰地观看到页面中的信息,应该是用户对网站最基本的要求了。

不管是bug也好,还是功能也罢,即然有人需要在Chrome上显示10px的字,那就满足他们的需求。

要解决chrome中最小字体为12px的问题,可以使用Webkit 的内核 -webkit-text-size-adjust 的私有属性来解决,比如下面的代码就可以成功的解决,简单有效,通过- webkit-text-size-adjust即可实现字体大小不随终端设备或浏览器影响。

css样式定义如下:

	
.chrome10px { -webkit-text-size-adjust:none; font-size:10px; }

如果还不能满足你在来瞧瞧:“针对谷歌浏览器内核,加webkit前缀,用transform:scale()这个属性进行缩放!”

.chrome10px {font-size:10px;-webkit-transform:scale(0.8);display:block; }

 

About the author

柏小白 administrator