谈谈网页中使用奇数字体和偶数字体

相信大多数人在开发中一开始被教导应该使用偶数字体多于奇数字体，但是并不懂其中的缘由。本人总结了一些大牛的看法和实践。

为何偶数居多？

1.比例关系

相对来说偶数字号比较容易和页面中其他部分的字号构成一个比例关系。如我使用14px的字体作为正文字号，那么其他部分的字体（如标题）就可以使用14×1.5 =21px的字体，或者在一些地方使用到了14×0.5=7px的padding或者margin，如果你是在用sass或者less编写css，这时候用处就凸显出来了。

2.UI设计师的缘故

大多数设计师用的软件如ps提供的字号是偶数，自然到了 前端那边也是用的是偶数。

3.浏览器缘故

其一是低版本的浏览器ie6会把奇数字体强制转化为偶数，即13px渲染为14px。

其二是为了平分字体。偶数宽的汉字，如12px的汉子，去掉1像素的字体间距，填充了的字体像素宽度其实就是11px，这样的汉字中竖线左右是平分的，如“中”子，左右就是5px了。

4.系统差别

Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px 时用的是小一号的点阵（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。

而在Linux和其他手持设备上，奇数偶数的渲染效果其实相差不大。

也可以使用奇数！！！

目前来说12，13，14，15，16px都是比较常用而且不错的字号，通过审查元素可以看到知乎的正文字号和豆瓣部分栏目（豆瓣电影）也是用了13px字号，效果都很不错。使用奇数号字体不好的地方是，文本段落无法对齐。

说到这里，有人会想起11px这个字号。那么关于这个这号，在谷歌中默认最小是12px字体，如果设置11px字体会渲染为12px字号，有人说通过设置css属性-webkit-text-size-adjust: none;来解决。本人实测失败，原因如下：

1.只对chrome27.0 版本以下有效，27.0以上版本无效；

2.只对英文才有效，对中文无效。

在新版的chrome中，已经禁止了改属性,建议使用CSS3中的方法:

transform:scale(0.7);

当使用transform:scale(0.7)时; 不仅是文字变小了，整个文字所在的容器也同时会变小，那么这时候可能就涉及到布局问题了，需要重新调整位置。

关于浏览器的支持的最小字体：

1.iphone6-plus、iphone5：     微信、QQ直接打开、safari中字体可以从最1px字体开始；

2.小米2s：微信、QQ浏览器最小显示字体8px；自带浏览器最小字体从1px开始；

3.小米4s：firefox可以从最小字体1px开始；chrome中最小显示字体为12px；

4. pc：     360安全浏览器7：最小最示12px；firefox与ie10最小显示字体为1px。

详情可以参考：http://www.cnblogs.com/he-lian/p/4512276.html