在网页中应该使用奇数还是偶数的字体?为什么?
应该使用 偶数字体。
1. 比例关系
相对来说偶数字号比较容易和页面中其他部分的字号构成一个比例关系。如使用 14px 的字体作为正文字号,那么其他部分的字体(如标题)就可以使用 14 × 1.5 = 21px 的字体,或者在一些地方使用 14 × 0.5 = 7px 的 padding 或 margin,如果是用 Sass 或 Less 编写 CSS,这时候用处就凸显出来了。
2. UI 设计师的缘故
大多数设计师用的软件(如 Photoshop)提供的字号是偶数,自然到了前端那边也是用的偶数。
3. 浏览器缘故
- 低版本的浏览器 IE6 会把奇数字体强制转化为偶数,即 13px 渲染为 14px。
- 为了平分字体:偶数宽的汉字(如 12px 的汉字),去掉 1 像素的字体间距,填充了的字体像素宽度其实就是 11px,这样的汉字中竖线左右是平分的,如"中"字,左右就是 5px 了。
4. 系统差别
Windows 自带的点阵宋体(中易宋体)从 Vista 开始只提供 12、14、16 px 这三个大小的点阵,而 13、15、17 px 时用的是小一号的点阵(即每个字占的空间大了 1 px,但点阵没变),于是略显稀疏。
而在 Linux 和其他手持设备上,奇数偶数的渲染效果其实相差不大。
补充:
- 偶数字号与设计稿常用 12、14、16、18、20、24、30 px 等数值匹配;前端工程(如 Ant Design、Element)的 design token 也都基于偶数。
- 当字号 ≤ 12px 时需考虑浏览器最小字号限制(Chrome 强制 ≥ 12px),可用 transform: scale()、SVG、iconfont 等替代方案,详见 css-008。



