font-weight 900 和 font-weight 700 以相同的方式呈现答案

【问题标题】：font-weight 900 and font-weight 700 are rendered in the same wayfont-weight 900 和 font-weight 700 以相同的方式呈现
【发布时间】：2019-09-07 21:44:45
【问题描述】：

我有这个示例 html 文件：

<div style="font-weight: 700; font-size: 3em">
    Test font bold (weight = 700)
</div>

<div style="font-weight: 900; font-size: 3em">
    Test font bold (weight = 900)
</div>

我不知道为什么如果我将font-weight 的值从900 更改为700 我会得到相同的结果。文本确实具有相同的大小。

在此 MDN 文档页面 https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight 中，如果我将值从 900 更改为 700（使用实时 css 更改的浏览器功能），我会得到不同的结果。

【问题讨论】：

这取决于您使用的字体（是否支持特定的字体粗细）。此外，当涉及到数字字体粗细时，许多浏览器都存在一个问题，它们仅支持特定步骤中的数值（大多数情况下大于 200 的间隙）。这个问题在这里得到了相当详细的解释：clagnut.com/blog/2228
我链接的页面的字体是什么字体？
@GiacomoM - 字体是sans-serif
你知道像 google Lato 这样重量为 900 的字体吗？

标签： html css font-size

【解决方案1】：

并非所有字体都支持字体粗细的所有变体。如果您需要更大胆的字体，则需要选择另一种字体。

将代码更改为 sans-serif font-family 将为您提供差异的生动示例。

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <style>
    div { font-weight: 900; font-size: 3em; font-family: sans-serif }
    </style>
</head>
<body>
    <div>Test font bold</div>
</body>
</html>

【讨论】：