font-weight 900 和 font-weight 700 的渲染方式相同

Question

我有这个示例 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 更改的浏览器功能），我会得到不同的结果。

Answer 1

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

将您的代码更改为具有无衬线字体系列将为您提供差异的实例。

<!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>

font-weight 900 和 font-weight 700 的渲染方式相同

font-weight 900 and font-weight 700 are rendered in the same way

html

css

font-size