在做 ilence.me 时，我要在首页用一个列表展示自己写过的所有博客，每条博客需要展示它的发布日期，发布日期的展示形式是“年月日”，比如 2024-11-18。做完之后我发现数字的宽度并不一致。比如 2024-11-18 和 2024-11-20 各自的后两位就宽度不一样，后者会比较长一点。因为是在一个列表里，所以看起来就是每行的日期都没有对齐。这对我这个强迫症来说，就非常难受。
等宽字体
查了一下资料后发现，这是字体造成的。计算机里的字体在字符宽度上分成等宽字体 (Monospaced) 和比例字体 (Proportional)。等宽字体指的是字符宽度相等的字体，与之相对的比例字体则指的是字符宽度不尽相同的字体。当然，这里所讲的字体都是指英文字体，对于中文字体而言，一般认为它们都是等宽的。
Windows 中常用的等宽字体为 Consolas；macOS 中常用的等宽字体为 Menlo；Linux 中常用的等宽字体为 Mono。
单独为数字指定字体
OK，现在我们已经知道了什么是等宽字体，也知道了等宽字体有哪些，接下来的问题是：如何单独为 0 到 9 这十个阿拉伯数字指定字体？方法是使用 CSS 的 @font-face rule：
css
@font-face {
/* font-family - 设置自定义字体的名称 */
font-family: "Monospaced Number";
/* src - 告知浏览器从哪里加载字体 */
/* local() - 告知浏览器加载用户设备自带的字体 */
src: local("Menlo"), local("Consolas"), local("Monaco");
/* unicode-range - 指定字体要应用到哪些字符上 */
/* U+30-39 - 代表的是 0~9 这十个数字 */
unicode-range: U+30-39;
}最后我们在 body 里设置 font-family：
css
body {
font-family: "Monospaced Number", system-ui, sans-serif;
}Bonus: 怎么确定某个元素具体是用的哪个字体
摘自 How can I determine what font a browser is actually using to render some text? ：
- In Firefox, the Page Inspector that shows after right-clicking some text and choosing Inspect Element, has a Fonts view: ...