css解决chrome 12像素字体大小限制

作者：Jasmine - 2015年03月17日

中文版的chrome有个12px字体限制的问题，就是当字体小于12px时候都以12px来显示，这个问题在中文网站中并不突出，因为中文字体为了显示清晰一般都定义为大于或等于12px，但如果是一些英文网站那就不好说了，这时12px的限制就会破坏页面的美感，甚至因为文字变大而导致页面变形。

可以使用Webkit 的内核的 -webkit-text-size-adjust 的私有 CSS 属性来解决，比如下面的代码就可以成功的解决，通过它即可实现字体大小不随终端设备或浏览器影响。样式定义如下：

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

只要加了 -webkit-text-size-adjust:none; 字体大小就不受限制了。

但是，在chrome更新到27版本之后就不可以用了。

那此时应该怎么办呢？想一想，还是有办法解决的。

chrome是支持css3的。那么我们是否可以写，

-webkit-transform : scale() 方法来解决呢？

因为ie是支持12号及以下字号的。

font-size : 12px;
-webkit-transform : scale(0.84,0.84) ;
*font-size:10px;

虽然有一点差距。不能精确到小数点后两位。。但是已经很好了。可以凑合用了。

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/129.html

版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！