网页字体大小奇偶选择

问题

在网页中设置字体大小时，应该使用奇数（如 13px、15px）还是偶数（如 12px、14px、16px）？

解答

推荐使用偶数字体大小。

原因分析

1. 浏览器渲染更精确

偶数字体在不同浏览器和操作系统中渲染效果更一致。奇数字体在某些情况下可能出现模糊或锯齿。

/* 推荐 */
body {
  font-size: 14px;
}

/* 不推荐 */
body {
  font-size: 13px;
}

2. 行高计算更方便

偶数字体配合常用行高倍数，结果更容易是整数：

/* 14px × 1.5 = 21px（整数） */
p {
  font-size: 14px;
  line-height: 1.5;
}

/* 16px × 1.5 = 24px（整数） */
h1 {
  font-size: 16px;
  line-height: 1.5;
}

3. 缩放时保持整数像素

用户缩放页面时，偶数字体更容易保持整数像素值，避免亚像素渲染问题：

/* 14px 缩放 50% = 7px（整数） */
/* 13px 缩放 50% = 6.5px（小数，可能模糊） */

4. 符合设计规范

主流设计系统都采用偶数字体：

/* 常见字体大小规范 */
:root {
  --font-xs: 12px;
  --font-sm: 14px;
  --font-base: 16px;  /* 浏览器默认值 */
  --font-lg: 18px;
  --font-xl: 20px;
  --font-2xl: 24px;
}

5. 相对单位换算简单

以 16px 为基准使用 rem 时，偶数更易换算：

html {
  font-size: 16px;  /* 1rem = 16px */
}

/* 偶数换算 */
.text-sm { font-size: 0.875rem; }  /* 14px */
.text-base { font-size: 1rem; }     /* 16px */
.text-lg { font-size: 1.125rem; }   /* 18px */

关键点

• 偶数字体渲染更清晰，跨浏览器表现一致
• 行高计算结果更容易是整数，避免亚像素问题
• 页面缩放时偶数字体保持整数像素
• 主流设计系统（Ant Design、Material Design）都用偶数
• 浏览器默认字体 16px 是偶数，方便 rem 换算