html - 什么情况下可以正确使用CSS粗体？

多年来，我一直在互联网上看到bolder字体权重值，但从未见过它实际使用。我不能改变从initial或bold显示的文本，在任何情况下，我都玩过当我制作网站。
使用Chrome，我试着用14个不同段落显示的所有字体权重值制作一个页面。我的顺序是：initial，lighter，normal，bold，bolder，100，200，300，400，500，600，700，800，900，initial和lighter。
normal，100，200，300，400，500，bold，bolder和600看起来都一样（不是粗体）。
700、800、900、font-weight: bolder、font-weight: bold、和看起来都一样（粗体）。
使用会导致文本显示比更粗体的情况是什么？

最佳答案

font-weight: bolder用于设置高于基本权重的下一级粗体。如果您已经在使用粗体字体，但字体系列支持更粗体的字体，则此选项非常有用。例如，Open Sans（https://fonts.google.com/specimen/Open+Sans）支持10个权重。如果你的基本字体是Open Sans Boldfont-weight: bolder的话，如果它可用的话，它会被提升到Open Sans Extra-Bold。或者如果你用的是light它会让你恢复正常，等等。
下面是一把小提琴，它展示了一个实际的例子：
https://jsfiddle.net/zv03Lf5v/3/

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');

p {
  font-family: 'Open Sans';
  font-weight: bold;
  font-size: 36px;
}

p span {
  font-weight: bolder
}

p.lighter {
  font-weight: 200;
}

<p>
  Open Sans <span>Bolder</span>
</p>

<p class="lighter">
  Open San Light <span>Bolder</span>
</p>

您可以看到，当您更改父项时，bolder版本会发生关系更改。