font-family recommendations

font-family recommendations Draft: started 2026-05-09 • Tagged /css, /opinions

草稿：始于 2026-05-09 • 标签 /css, /opinions

1. Never assume that a named font will work

There are no web-safe fonts; none are available across all major platforms. Web fonts (@font-face and all) are not safe either: If not inlined, subresources can fail to load for all kinds of network reasons. Font loading is an area of concern for security, so some block it for safety. uBlock Origin has a dedicated button for disabling remote fonts. I think some browsers’ data-saving modes block fonts from loading. (And those that don’t, should.) Or the user might have elected not to let websites choose their own fonts. I’ve been doing that since 2020, and it makes the web so much better. For me, generic families are the only ones that will work.

1. 永远不要假设指定的字体一定能正常显示

不存在所谓的“Web 安全字体”；没有任何字体能在所有主流平台上通用。Web 字体（@font-face 等）也不安全：如果不是内联的，子资源可能会因为各种网络原因加载失败。字体加载是安全关注的领域，因此有些工具会出于安全考虑将其拦截。uBlock Origin 就有一个专门禁用远程字体的按钮。我认为某些浏览器的流量节省模式也会阻止字体加载（没这么做的浏览器也应该这么做）。或者，用户可能选择不允许网站自定义字体。我从 2020 年起就一直这样做，这让网页浏览体验变得好多了。对我而言，只有通用字体族（generic families）才是唯一可靠的选择。

One related JS thing: if you ever use document.fonts.load("1em my-web-font"), remember that it’s fallible: the promise it returns may be rejected. I came across about four things in the six years 2020–2025 that broke for this reason (and two of them were in 2025). Now for a couple of consequence of this.

关于 JS 的一点补充：如果你使用 document.fonts.load("1em my-web-font")，请记住它是不可靠的：它返回的 Promise 可能会被拒绝。在 2020 年到 2025 年这六年间，我遇到了大约四次因此导致的问题（其中两次发生在 2025 年）。由此产生了一些后果。

a) Always include monospace if you want the text monospaced I see this forgotten occasionally, since its lack doesn’t affect most people. Sometimes on pages that were all-monospace for no good reason. Those times, it honestly made the pages better! But other times it damages things. As a concrete example, at the time of writing, Adel Faure’s ASCII might fly? artwork is missing monospace, and looks a little like this for me: (assuming your styles or user agent don’t make it monospaced!)

a) 如果你希望文本以等宽字体显示，请务必包含 monospace 我偶尔会看到有人忘记这一点，因为缺少它对大多数人影响不大。有时在一些无缘无故全用等宽字体的页面上，这反而让页面看起来更好！但在其他情况下，它会破坏显示效果。举个具体的例子，在撰写本文时，Adel Faure 的 ASCII 艺术作品“might fly?”就缺少了 monospace，对我来说看起来像这样：（假设你的样式或用户代理没有强制将其设为等宽！）

[ASCII Art omitted]

Add in the fallback monospace: pre { font-family: "jgs", monospace; } I was actually going to write that last point as “always include a generic family”, but really it’s only monospace that it’s important for. Still—

加上回退的等宽字体：pre { font-family: "jgs", monospace; }。我本来想把最后一点写成“总是包含一个通用字体族”，但实际上只有 monospace 是至关重要的。不过——

b) Include serif or sans-serif if you want that kind of fallback font Although serif or sans-serif are rarely important, you probably want to include one of them all the same. font-family: Arial, sans-serif; font-family: Times New Roman, serif; Otherwise, it’ll use the default font, which is probably serif but could be something else altogether.

b) 如果你需要某种回退字体，请包含 serif 或 sans-serif 虽然 serif 或 sans-serif 很少重要，但你可能还是想包含其中之一。例如 font-family: Arial, sans-serif; 或 font-family: Times New Roman, serif;。否则，它将使用默认字体，这通常是衬线体，但也可能是其他任何字体。

2. Stop enumerating fonts that the system might have installed

I’ve seen too much of this kind of thing: font-family: "Arial", Helvetica, 'Helvetica Neue', Liberation Sans, "Noto Sans", sans-serif; Google Sans, Roboto, Arial, sans-serif Definitely ditch Arial: it’s never going to be better than sans-serif. Also ditch Roboto: it’s almost never. It doesn’t help. sans-serif will resolve to a font no worse than those you named, and quite possibly better.

2. 停止罗列系统可能安装的字体

我见过太多这样的写法：font-family: "Arial", Helvetica, 'Helvetica Neue', Liberation Sans, "Noto Sans", sans-serif; 或 Google Sans, Roboto, Arial, sans-serif。果断放弃 Arial：它永远不会比 sans-serif 更好。也放弃 Roboto：它几乎从不生效。这毫无帮助。sans-serif 解析出的字体绝不会比你列出的那些差，甚至很可能更好。

Here’s a real example I just came across (with spaces restored after punctuation, for it was minified): font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif This is ridiculous, strictly worse than font-family: monospace, monospace. monospace will resolve to a font that is no worse.

这是我刚遇到的一个真实例子（为了可读性，我恢复了标点后的空格，原代码是压缩过的）：font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif。这太荒谬了，严格来说比 font-family: monospace, monospace 还要差。monospace 解析出的字体绝不会比这些差。

Now I’m not saying there’s never a case for it. Consider Georgia and Times New Roman, both serifs from Microsoft’s Core fonts for the Web. But they have quite different character: Georgia is a good deal wider. If that’s what you want for stylistic reasons, I will not begrudge you font-family: Georgia, serif.

我并不是说这种情况完全没有意义。考虑 Georgia 和 Times New Roman，它们都是微软 Web 核心字体中的衬线体。但它们的字符特征截然不同：Georgia 要宽得多。如果这是出于风格上的考虑，我不会反对你使用 font-family: Georgia, serif。

a) Have at most one named, non-web font This is an exception. Consider Georgia and Times New Roman, both serifs from Microsoft’s Core fonts for the Web. But they have quite different character: Georgia is a good deal wider. If that’s what you want for stylistic reasons, I will not begrudge you font-family: Georgia, serif.

a) 最多只保留一个指定的非 Web 字体 这是一个例外。考虑 Georgia 和 Times New Roman，它们都是微软 Web 核心字体中的衬线体。但它们的字符特征截然不同：Georgia 要宽得多。如果这是出于风格上的考虑，我不会反对你使用 font-family: Georgia, serif。

modernfontstacks.com is interesting. Their repository describes more about which fonts for which platforms. Interesting ideas, but I reckon it tries to prescribe beyond what is wise, and that a good chunk of the named fonts would be better removed. Also, they’ve wildly and catastrophically mishandled Courier New—looks like their images were made with the macOS Courier.

modernfontstacks.com 很有意思。他们的仓库详细描述了哪些字体适用于哪些平台。想法很有趣，但我认为它试图给出的建议超出了合理的范围，其中很大一部分指定的字体最好删掉。此外，他们对 Courier New 的处理简直是一场灾难——看起来他们的演示图片是用 macOS 的 Courier 制作的。

3. Strongly consider using only a generic family

So perhaps we’ve removed the locally-installed fonts as not useful; now how about web fonts? A web font is slower than no web font; and you can run into issues loading them; so we got font-display. But really, instead of messing around with block and swap periods and redrawing and reflowing tradeoffs, why not just use whatever font the user has? It won’t be that bad. They might even have chosen fonts themselves. Consider it.

3. 强烈建议仅使用通用字体族

既然我们已经认为本地安装的字体没什么用，那 Web 字体呢？Web 字体比不使用 Web 字体加载更慢；而且你可能会遇到加载问题，所以我们有了 font-display。但说真的，与其折腾 block 和 swap 周期以及重绘和回流的权衡，为什么不直接使用用户现有的字体呢？效果不会差到哪去。用户甚至可能自己设置过字体。考虑一下吧。

a) Yes, even for monospace Historically, monospace defaults were bad. This is mostly Microsoft’s fault for using that abomination Courier New, which was digitised badly and is effectively a 200–250 weight instead of a 400. Then, Apple introduced Menlo, and people liked it, so people started putting that in their font stacks, since the browser makers weren’t updating monospace. And so it went on. Well, those days have passed. Browser defaults are all better now. They may not yet be spectacular in all cases, but they’re never bad any more.

a) 是的，即使是等宽字体也一样 从历史上看，默认的等宽字体确实很糟糕。这主要是微软的错，因为他们使用了 Courier New 这个“怪物”，它的数字化处理很差，实际字重只有 200–250，而不是标准的 400。后来，苹果推出了 Menlo，人们很喜欢它，于是开始把它放进字体栈里，因为浏览器厂商当时并没有更新默认的等宽字体。情况就是这样。不过，那些日子已经过去了。现在的浏览器默认字体都好多了。它们可能在所有情况下都不算惊艳，但绝对不再糟糕了。