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

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



网络上有一些解决方法,但都是针对本地客户端的修改,毕竟我们不能让每个用户去修改他的浏览器设置,所以还是希望通过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.

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

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

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

  3. Bell says:

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

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

  5. 淘宝美瞳 says:

    今天再过来看看有更新没

  6. 酷壳 says:

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

  7. GEO美瞳 says:

    看看有更新没 呵呵

  8. 学习了,感觉不错。

  9. GEO美瞳 says:

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

  10. wooo says:

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

  11. Bell says:

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

  12. 万戈 says:

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

  13. very says:

    似乎有点道理

发表评论

您的电子邮箱不会被公开。 标记为 * 的区域必须填写

*

*

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