html - CSS 字体粗细 - 看不见的差异？

Question

我做了这个简单的演示。

我可以在 Visual Studio 中看到所有font-weight可以具有的值：

但是，当我尝试所有这些值时，我只能找到 4 个不同的值。

我添加了那些红色矩形，这样你就可以看到谁的宽度相同。

为什么中间的那些（和最后的）看起来都一样？为什么我需要所有这些数字？

Answer 1

不同的字体有不同的字体粗细可供它们使用。您的浏览器不会尝试模拟丢失的权重（这是一件好事，但很难做到正确），因此您受限于您正在使用的已安装字体版本中存在的权重。

Answer 2

这可能是因为字体不支持这么多不同的权重，或者浏览器无法显示这些权重。

无论如何，数字必须在那里，因为这就是字体权重的工作方式。如果字体确实支持不同的权重，则取决于浏览器是否尽可能准确地显示它；否则它会尝试优雅地退回到支持的最近的位置。