中文版的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)


今天没更新文章么 呵呵
希望博主能不断写出更好的文章
@酷壳 FontLab已发到你的邮箱~
仔细看了看你的博客,觉得,还不错。如果有机会在外包领域合作。我很期待。
今天再过来看看有更新没
FontLab下了好多绿色版不能用,希望博主能提供一个可以用的.我的邮箱:kuke86421@qq.com,万分感谢!
看看有更新没 呵呵
学习了,感觉不错。
您好,经常关注您的博客,您的博客很不错!
小的英文字体可以用04系列,这样就不用自己做了
@万戈 其实chrome的这个限制,影响最大的就是英文字体,12px以下的中文字体很少用到:)
这个问题也困扰着我,英文字体可以载入,可是中文就又杯具了
似乎有点道理