未来往事
在 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/
本站采用「署名 4.0 国际(CC BY 4.0)」创作共享协议。通俗地讲,只要在使用时署名,那么使用者可以对本站所有原创内容进行转载、节选、混编、二次创作,允许商业性使用。除非在文章正文内单独说明,本站欢迎各种形式的转载。互联网技术更新很快,本站很多文章都具有实效性,我会及时更新原文,但转载的文章无法通知更新。为了不给读者造成困惑或误导,请大家在转载时保留此出处信息。
侯永禄 Homepage
2013/07/01 01:41
其实我做前端的时候都是以chrome为标准的,过小的文字我会用css背景图片替代。
ff
2013/06/21 13:40
第一种方法 不行,不知博主试过没有。
Rinald 回复于 2013/06/21 17:03
感谢来访,未来往事博客当前主题CSS样式中使用的就是第一种方法哦
第1页 / 共1页 第一页 1 最后页
发表评论
  昵称 [注册]
  密码 (游客无需密码)
  网址
  电邮(电子邮件地址不会被公开, 仅用于接收评论回复提醒使用)
OpenID登入 权限选项 表情