font-weight: 300 被认为有害

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 提供适合您旅程各个阶段的云产品。 立即开始使用 $200 免费积分!

Tomáš Janoušek

如今,许多网页在他们的样式表中设置了 font-weight: 300 。 我偏爱 DejaVu Sans 字体,这样会导致文本非常细并且难以阅读,因为某些原因,"DejaVu Sans ExtraLight" 变体(重量 200)被用于小于 360 的权重(在 Chrome 中;在 Firefox 中,权重小于等于 399)。 让我们调查一下为什么会发生这种情况以及如何解决这个问题。

为什么人们要设置 font-weight: 300;? 嗯,可能是 Mac 用户。 在我的 macOS Catalina 计算机上,看看一些默认内置字体在 400 和 300 之间的差异。

顶部是 400 权重,底部是 300 权重

我不会责怪设计师在某些情况下使用 300 权重。 事实上,11 年前,我发布了一个名为 “更好的 Helvetica” 的代码片段,它宣传了这一点。

body {
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   font-weight: 300;
}

但对于 Tomáš 来说,他的默认字体是 DejaVu Sans(许多 Linux 和 Android 系统的默认字体),当字体很细时,这种字体很难阅读。 问题的一部分是,如果备用字体碰巧没有 300,则规范规定它可以回退到 100,如果需要的话。 我相信这个技术的术语是非常非常细

我会尽量避免这种情况(或者在我加载我知道有 300 的 Web 字体时使用它),但是如果这个问题让你在许多网站上感到困扰,请查看 Tomáš 的文章,了解如何在你的计算机上进行修复。 这实际上让我想起了不同的 修复级别

直接链接 →