网页字体大小选择

问题

在网页中应该使用奇数还是偶数的字体大小？为什么？

解答

推荐使用偶数字体大小，如 12px、14px、16px、18px 等。

原因分析

1. 浏览器默认字体是偶数

/* 浏览器默认 */
body {
  font-size: 16px;
}

2. 偶数字体便于计算

.container {
  font-size: 14px;
  /* 1.5 倍行高 = 21px，向上取整为偶数更协调 */
  line-height: 1.5;
}

/* 使用 rem 时，偶数更易换算 */
html {
  font-size: 16px; /* 1rem = 16px */
}

.title {
  font-size: 1.5rem;  /* 24px */
}

.text {
  font-size: 0.875rem; /* 14px */
}

3. Windows 点阵字体限制

Windows 系统下的宋体、微软雅黑等点阵字体，只提供 12px、14px、16px 等偶数字号的点阵。奇数字号会使用灰阶渲染，可能导致字体发虚。

4. 设计规范基于偶数

/* 常见的字体规范 */
:root {
  --font-xs: 12px;
  --font-sm: 14px;
  --font-base: 16px;
  --font-lg: 18px;
  --font-xl: 20px;
  --font-2xl: 24px;
}

5. 垂直居中更精确

/* 偶数高度配合偶数字体，居中不会出现 0.5px */
.button {
  height: 32px;
  font-size: 14px;
  line-height: 32px;
}

例外情况

现代高清屏幕和矢量字体下，奇数字体的渲染问题已大幅改善。如果设计稿使用奇数字体，也可以直接使用。

关键点

• 推荐偶数字体，如 12px、14px、16px
• Windows 点阵字体只有偶数字号，奇数会发虚
• 偶数便于行高计算和 rem 换算
• 偶数高度配合偶数字体，垂直居中更精确
• 现代高清屏下奇数字体问题已不明显