CSS方法解决chrome 12像素字体限制

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



使用webkit私有属性 -webkit-text-size-adjust:none; 感谢飘飘分享此方法!
关于-webkit-text-size-adjust的详细使用和解释,请访问:http://webdesignernotebook.com/…

提示:你可以先修改部分代码再运行。

下面是原来折腾出来的偏方

网络上有一些解决方法,但都是针对本地客户端的修改,毕竟我们不能让每个用户去修改他的浏览器设置,所以还是希望通过css方法解决,通过不断尝试找到了一个偏方:

通过自制字体来解决12px限制。

方法的灵感来源于一次字体对比,当我在页面中载入Verdana和Georgia时,发现同样是12px,但在显示上Georgia比Verdana小,于是就想到如果能找到一种字体,它的12px比其它正常字体的12px要小许多,这样就算chrome有12px限制,那么这个字体因为自身12px小的缘故所以显示上就会明显小于其它字体的12px,也就间接的达到缩小字体的目的。但尝试了很多字体都没有找到合适的,所以最后决定自己修改一套字体。

这里用的是系统自带的arial,通过FontLab来修改,我只保留了A-Z、a-z、0-9以及一些运算符号,然后将它们的大小缩至原来的70%(反复测试结果,70%字体看上去比较正常=.=)





保存,重命名为arialg…

通过@font-face外链自定义字体

有了合适的字体,剩下的就是用@font-face加载它,修改后的arialg大小只有35kb,应该不会对页面载入造成负担。最后还可以通过webkit的hack来防止其他浏览器加载这个字体。

看看chrome中的效果:

Demo:

提示:你可以先修改部分代码再运行。

当然这个方法也有明显的弊端:
1.对字体的要求比较高,想找到合适的字体不容易,自制的话成本又较高,而且很难保证美观。
2.会影响到同样是webkit内核的safari浏览器。
3.只适用于英文字体。

折腾出的这个方法也只能算是勉强能用,虽然涉及到字体制作,但主要原理还是利用CSS,而且不牵扯到用户设置,所以姑且算是一种CSS方法吧,呵呵。当然最终还是希望google能把这个蹩脚的限制去掉,能让我们有更多发挥的空间。

FontLab
windows版本(可以去网上找下绿色版)
mac版本(带key)

This entry was posted in HTML & CSS. Bookmark the permalink.

15 Responses to CSS方法解决chrome 12像素字体限制

  1. Bell says:

    @飘飘 赞!方法简单高效,感谢分享。ps:你blog的速度好慢…

  2. 飘飘 says:

    其实,chrome支持12px以下的,详见:
    http://www.pufen.net/technology/2010/215/

  3. 今天没更新文章么 呵呵

  4. 希望博主能不断写出更好的文章

  5. Bell says:

    @酷壳 FontLab已发到你的邮箱~

  6. 仔细看了看你的博客,觉得,还不错。如果有机会在外包领域合作。我很期待。

  7. 淘宝美瞳 says:

    今天再过来看看有更新没

  8. 酷壳 says:

    FontLab下了好多绿色版不能用,希望博主能提供一个可以用的.我的邮箱:kuke86421@qq.com,万分感谢!

  9. GEO美瞳 says:

    看看有更新没 呵呵

  10. 学习了,感觉不错。

  11. GEO美瞳 says:

    您好,经常关注您的博客,您的博客很不错!

  12. wooo says:

    小的英文字体可以用04系列,这样就不用自己做了

  13. Bell says:

    @万戈 其实chrome的这个限制,影响最大的就是英文字体,12px以下的中文字体很少用到:)

  14. 万戈 says:

    这个问题也困扰着我,英文字体可以载入,可是中文就又杯具了

  15. very says:

    似乎有点道理

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>