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中的效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>temp</title> <style type="text/css" media="all"> *{ margin:0; padding:0;} @media screen and (-webkit-min-device-pixel-ratio:0){@font-face { font-family:arialg; src: url("http://www.iinterest.net/demo/font/arialg.ttf");}} div{ width:200px; height:30px; margin:10px; border:1px dotted #d7d7d7;} @media screen and (-webkit-min-device-pixel-ratio:0){.i-font{ font-family:arialg; font-size:12px;}} .f16{ font-size:16px;} .f14{ font-size:14px;} .f12{ font-size:12px;} .f10{ font-size:10px;} .f8{ font-size:8px;} .f6{ font-size:6px;} </style> </head> <body> <div class="i-font">iinterest 0123456789</div> <div class="f16">iinterest font-size:16px</div> <div class="f14">iinterest font-size:14px</div> <div class="f12">iinterest font-size:12px</div> <div class="f10">iinterest font-size:10px</div> <div class="f8">iinterest font-size:8px</div> <div class="f6">iinterest font-size:6px</div> <div style="font-family:Verdana; font-size:12px;">Verdana font-size:12px</div> <div style="font-family:Georgia; font-size:12px;">Georgia font-size:12px</div> </body> </html>
提示：您可以先修改部分代码再运行

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

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

[ 本帖最后由 iinterest 于 2010-7-19 10:24 编辑 ]

作者: iinterest 发布时间: 2010-07-18

給你補充點，中文可以用11px字體，mingliu或者pmingliu，不過pmingliu的英文間隔不太好看

作者: km268 发布时间: 2010-07-18

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>无标题文档</title> <style type="text/css"> </style> </head> <body> <div style="-webkit-transform:scale(0.5);-webkit-transform-origin:0 0;font-size:12px;">文字文字文字文字文字</div> </body> </html>
提示：您可以先修改部分代码再运行

作者: 14px 发布时间: 2010-07-18

14px提供的方法拓展了思路
但同样也有些问题,1.无法保证字体美观,2.字体的颜色收到了影响

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> </style> </head> <body> <div style="-webkit-transform:scale(0.5);-webkit-transform-origin:0 0; font-size:12px; color:#ff6600;">文字文字文字文字文字</div> <div style="-webkit-transform:scale(0.7);-webkit-transform-origin:0 0; font-size:12px; color:#ff6600;">文字文字文字文字文字</div> <div style="-webkit-transform:scale(0.9);-webkit-transform-origin:0 0; font-size:12px; color:#ff6600;">文字文字文字文字文字</div> </body> </html>
提示：您可以先修改部分代码再运行

作者: iinterest 发布时间: 2010-07-20

14PX一贯能够给人惊喜

作者: mycggo 发布时间: 2010-07-20

很全面，多了解一下！

作者: kuangerzhai 发布时间: 2010-07-20

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

作者: aleafo 发布时间: 2010-10-08

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

热门阅读

热门下载