rinald_未来往事

Chrome浏览器最小字体12px限制问题解决方法

WEB前端
在 DIV+CSS3 的布局中,我一直以为 IE6 是最难伺候的,一会这个 bug,一会那个 bug,如果能把 IE6 摆平了,那也就天下太平了,兼容其他的浏览器应该也就不成问题。但是,我在制作新的 bo-blog 主题中碰到了一个不属于 IE 的杯具问题,在 Firefox、Opera、Safari 甚至在 IE 下都能正常显示的页面居然在 Chrome 下错位了!?这是让人无法容忍的,我可以 kill IE,但我不能把 Chrome 也给 kill 了。

对于网站交互设计来说,chrome浏览器确实考虑的比较细致,针对眼视力障碍提供很好的帮助,但是为什么对于中文版的有12px限制呢?因为在中文当中,普遍使用的是宋体,宋体字体当中最小而且最清晰是12px大小,低于12px大小的文字就会看不清楚,针对中国本土化确实做的很细心,但是这个细心把英文也一起拖累了,英文其实在低于12px也相当清晰,而且有一种精致的感觉,所以常常在网页设计师的笔下,英文有设计成小字体的情况。

言归正传,chrome之前第一次遇到这个问题当时囫囵吞枣的给遮掩过去,想到网站反正针对与国外,用chrome的必定是英文版居多,所以页面测试的时候通过把chrome设置成为英文了。毕竟这只是应急的方法,通过查询还真的查处了不少的好方法,在这里就罗列了出来。

对于chrome中文版12px的解决方法在下面罗列了出来:
方法一(推荐):
最直接最简单的就是通过css的属性进行限定,原来webkit核心有个私有的css属性是 -webkit-text-size-adjust 就可以用来解除这个限定。
-webkit-text-size-adjust  的意思就是,终端设备对文字的调整。通常情况下苹果移动设备对该属性进行支持。

-webkit-text-size-adjust 属性有两个值“none”和“auto”,默认值根据不同的浏览器进行定义。

直接在css当中定义-webkit-text-size-adjust:none;即可接触chrome对12px字体大小的限制。

关于-webkit-text-size-adjust的详细使用和解释,请访问:http://webdesignernotebook.com/css/the-little-known-font-size-adjust-css3-property/

方法二:
-webkit-transform 该css属性可以设定比列进行对字体打小的限制。

-webkit-transform所设置属性scale();括号内填写数字,若为数值 1 即默认大小(一般情况下0.5,0.7,0.9),chrome里面为12px,在firefox里面测试,对-webkit-transform不起作用。

方法三:
使用字体文件本身就不是标准字体大小,意思就是调成12px的大小,实质字体文件12px内部字体显示就是低于12px的。当然这只是一种应急的办法。还是对这个方法说说把。

@font-face { font-family:arialg; src: url(“http://www.iinterest.net/demo/font/arialg.ttf”);}这段css当中可以看出,font-family定义的字体并不是系统安全字体,后面src属性可以看出这个地址是这个字体的下载地址,由于英文字体较小,使用这种方法到不足以较大影响网页加载。

当然这个方法也有明显的弊端:
1.对字体的要求比较高,想找到合适的字体不容易,自制的话成本又较高,而且很难保证美观。
2.会影响到同样是webkit内核的safari浏览器。
3.只适用于英文字体。
原文作者:rinald
原文地址:http://fity.cn/post/257.html
互联网技术更新较快,本站很多文章具有实效性,我会及时更新原文,但转载的文章无法通知更新。为了不给读者造成困惑或误导,请您在转载时保留此出处信息,尊重别人也是尊重自己。

已有3位网友发表了看法:

1Lff 2013-06-21 13:40:47 回复
第一种方法 不行,不知博主试过没有。
1Lrinald 2013-06-21 17:03:13 回复
@ff 感谢来访,未来往事博客当前主题CSS样式中使用的就是第一种方法哦
2L侯永禄 2013-07-01 01:41:18 回复
其实我做前端的时候都是以chrome为标准的,过小的文字我会用css背景图片替代。

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。