带有表格数字的CSS乔治亚字体堆栈

用这个跨平台系统的字体堆栈将格鲁吉亚的滴水数字替换成表格数字。

Nick Galbreath-March 29, 2018

在许多CSS堆栈中，Georgia既被用作主要字体，也被用作后备字体，因为它在几乎所有的macOS和Windows机器上都可用。然而，在默认情况下，Georgia使用的是 "旧式的、按比例的数字 "或 "文本数字"。也就是说，这些数字有不同的宽度，所以它们在表格中不能很好地对齐，还有不同的垂直尺寸和对齐方式。许多（大多数？）其他字体使用 "表格式、衬里式数字"，具有类似的水平尺寸和垂直排列。正如其名称所示，它们在表格中运行良好。关于数字类型的更多细节可以在《实用字体设计》和《使用数字样式》中找到。我们能不能像乔治亚州那样，在不求助于网络字体的情况下拥有表格数字的普遍性？

在几乎所有的操作系统上，都有类似的系统字体，使用与Georgia相融合的表格数字。然后使用CSS@font-face ，我们就可以把Georgia和表格数字的交替部分拼接起来。对于macOS和Debian/Ubuntu Linux，使用Charter。对于Windows和Fedora Linux，使用Cambria或它的克隆Caladea。安卓系统最终应该使用诺托-塞里夫字体，这也是一个很好的默认的表格数字。

操作系统	结果
macOS, iOS	`Georgia` 使用的数字来自`Charter`
Windows	`Georgia` 有来自的数字`Cambria`
蝶变、Ubuntu	`Bitstream Charter`
Fedora	`Caladea` (Cambria clone)
其他所有人	`serif`

实施这一策略的CSS是。

/* serif tabular numbers for georgia on macOS, windows */
@font-face {
  font-family: "tabular-numbers";
  src: local("charter"), local("cambria");
  unicode-range: U+0030-0039;
}
font-family:
  /* 1 */ tabular-numbers,   /* tabular numbers for Windows, macOS, iOS */
  /* 2 */ georgia,           /* windows, macOS, iOS */
  /* 3 */ bitstream charter, /* debian & ubuntu */
  /* 4 */ caladea,           /* fedora */
  /* 5 */ serif;             /* everything else */

你可以在CodePen上看到这个结果。还有一些变化可以做，比如让Charter或Cambria成为主要字体，Georgia作为备用。无论哪种方式，这些堆栈都应该产生一个一致的跨平台体验，即使用表列数字的衬线字体。

CSS乔治亚字体堆栈与表格式数字

带有表格数字的CSS乔治亚字体堆栈