Chrom中font-size最小12px的解决方案

作为一名“强迫症”晚期患者，自己深深感到很是愉快。奇怪的是我并不是处女座，我是工作狂摩羯座，为啥我会有强迫症呢？我也不清楚这个答案。你要问我是怎么知道自己是强迫症的，这个其实很好办，看一张图就知道自己是不是强迫症了。

强迫症测试神图

如果你和我一样多看一眼就觉得受不了，担心这些东西全部从桌子上掉下来。那么恭喜你也是强迫症……不行不能看了。负面感觉已经涌现了上来，开始心塞、难受、紧张……

要哭了

什么样的图才能满足强迫症的需求呢？考虑了下我不是美工，没有半点美术功底，审美也是差到姥姥家了。画图什么的还是省省吧，应该发挥自己的优势，用自己的本专业来实现吧。写了段JQuery来满足下自己小小的强迫症“癖好”也算是工作之余的一点小小娱乐活动。>>>>>点这里看代码<<<<<<

字号迭代显示

/*jquery*/
 
$(document).ready(function () {
    for (var i =0;i<25;i++){
        $("body").after("<div id='fonts-"+i+"' style='font-size:"+i+"px;'>
           这里面的字体大小是"+i+"px;</div>");
    }
});

在IE11中看到的结果如下：

IE11看到的font-size迭代显示效果

这顺畅的感觉，爽的不要不要的。这货肯定用飘柔了，看这弧度、这飘逸感，眼睛的焦点根本就移不开啊。不过有点不对劲啊，我一直在用的浏览器是Chrome啊，而且Chrome也是我的默认浏览器，怎么直接用IE11打开了？这个不对啊……有强迫症的我一定要用Chrome。Come On Baby!让我感受顺畅的感觉吧！

chrome看到的font-size迭代显示效果

我的“飘柔”怎么不见了？这一坨整整齐齐的东西是什么玩意？fu*k!!!font-size到12px之后再往下都是一样的大小呢？

CSS1.0就已经有的font-size在兼容性方面应该没有任何问题的吧，怎么会出现这种情况呢？其实这个问题的答案我早就知道了，嘿嘿为了总结知识写博客，我只能假装不知道了。你可以理解为我在装逼卖萌。

这个问题主要出现在chrome中文版桌面浏览器上，在英文版中并不存在这个问题。chrome自作主张的认为汉字小于12px就会增加识别难度，尤其是中文常用的宋体和微软雅黑。不过这也是事实，我们可以回到上面IE11效果截图中看下，当页面中的font-size小于10px的时候，看起来就已经很费眼了。如果是一篇较长的文章中是这种字号估计很少有人会耐心看完，就算看完了也会抓狂~

要解决这个问题其实很简单，在chrome中文版的“高级设置”中的“网络内容”下有一个“自定义字体”。点击“自定义字体”会弹出一个对话框，在最下面就可以调整chrome的最小字体的设置。如图：

chrome设置网页最小字体

这个设置可以调整在chrome中的最小字体值，它的调整范围是6px到24px，不过这只能解决自己浏览的问题，如果我们在自己的前端作品中设置有小号的字体，我们不可能去让每一位chrome浏览者去修改自己的设置。怎么通过构建CSS声明也让Chrome用户不用修改自身的设置也能正常显示小号字呢？

第一种解决方案就是给需要小号字的容器添加-webkit-text-size-adjust:none;声明，-webkit-text-size-adjust属性用来设定文字大小是否根据设备(浏览器)来自动调整显示大小，safari3.0+，chrome1.0+可以支持。它有三个值可以设置分别是：

• percentage：字体显示的大小；
• auto：默认，字体大小会根据设备/浏览器来自动调整；
• none:字体大小不会自动调整

这个属性在Chrome 27版本中已经取消，在新版本的Chrome如果使用了该属性，在调试窗口会出现Unknown property name。比较奇怪的地方就是移动端chrome/safari目前依然支持-webkit-text-size-adjust属性！！！脑子绝对秀逗了，要知道-webkit-text-size-adjust属性的滥用会使得webkit内核的浏览器失去调节能力，使用不当的时候会出现相当严重的后果。没看我在上段话中说的是“小号字的容器”，我是一个比较严谨的人，虽然我从来没有这么自夸过，但这是事实~~！（已经开始不要脸了……）

啥严重后果，难道电脑会爆炸？呃~没那么严重，假设我们为了图省事，在全局范围设置该属性的话body{-webkit-text-size-adjust:none;}，当用户在Chrome中放大缩小页面的时候，文字却维持定义的大小而不放缩，给用户带来相当不友好的使用体验。对于有视觉障碍的浏览者更是不友好（尤其是Mobil端）。这种结果是一个对客户负责的前端“攻城狮”不愿意看到的，看来这个方案也只能被当成山穷水尽没有办法时的一个过渡替代方案了。

妈妈从小就教育我们：“困难像弹簧，你弱它就强。”要不折不挠的一次又一次的对困难发起挑战才行，经过思索和前人的经验总结于是有了第二种方案。

第二种解决方案就是通过transform:scale(*);来调整文字。具体代码如下：

.chrome-adjust {  
 
 font-size: 9px;  
 -webkit-transform: scale(0.75); 
 
/*能正常显示9px的浏览器会正常显示，*/
/*而Chrome最小字号是12px，通过缩放12*0.75=9px;*/

}

啊哈，回顾一下思路。我们的设计还是比较合理的，对于能正常显示9px字号的浏览器就直接显示结果就好了，当Chrome浏览器访问页面的时候看到私有前缀-webkit-就会执行缩放的渲染，而Chrome的最小字号是12px，缩放之后的结果就是12px*0.75=9px。完美解决了！真的完美解决了吗？

我们只需要对Chrome进行缩放渲染，可是因为私有前缀的问题，无法分辨到底是Safari渲染还是Chrome渲染。这个目前尚没有有效的CSS hack来解决。所以只能通过javascript来判断来访者浏览器是否为Chrome。判断方法：var isChrome = !!window.chrome;当检测为Chrome的时候，将.chrome-adjust这个类添加到对应的标签。再来看看该方案在几种浏览器中的表现。

• Chrome：由于启用了缩放字符间距会改变，美观程度下降。完美主义者会加js判断为Chrome后再用CSS属性letter-spacing去修复。
• Firefox：FF不认识-webkit-私有前缀，所以表现正常font-size:9px。
• Opera：版本12.5+能够识别-webkit-前缀,可是艹蛋的地方是它又能够显示12px以下的字号，根据渲染规则结果变成了9px*0.75=6.75px，字小到这种程度特么会没朋友的，所以还要给opera添加-o-transform: scale(1);这个声明。

好吧，再来修改我们的CSS吧。

.chrome-adjust {  

 font-size: 9px;  
 -webkit-transform: scale(0.75); 
 -o-transform: scale(1);  /*针对能识别-webkit的opera */
 
}

好吧，关于桌面浏览器的CSS hack我们能做的也就是这么多了，期待有更好的方案或标准出现。另外text-size-adjust属性是可以设置百分比的。关于移动端text-size-adjust属性在文档《CSS Mobile Text Size Adjustment Module Level 1》中有更详细的描述。

签名-金三胖