在 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.只适用于英文字体。

相关文章

• css ~ , + >
• Nginx Google反向代理扩展ngx_http_google_filter_module
• ul菜单居中_水平居中css样式
• Google Adsense付款流程说明
• 谷歌Google创新9原则