Question

我已经看到互联网上提到的bolder字体重量值多年，但我从未见过它实际使用过。在制作网站的任何情况下，我都无法更改initial或bold中显示的文字。

使用Chrome，我尝试制作一个页面，其中包含14个不同段落中显示的所有字体粗细值。我按顺序填写了这些内容：initial，lighter，normal，bold，bolder，100，200，{ {1}}，300，400，500，600，700和800。

900，initial，lighter，normal，100，200，300和{{1所有看起来都一样（不是粗体）。

400，500，bold，bolder，600和700看起来都一样（粗体）。

使用800会导致文本显示比900更粗体的情况会怎样？

Answer 1

font-weight: bolder用于将下一级别的粗体设置为高于基本权重。如果您已经使用粗体字体，这很有用，但字体系列支持更大胆的权重。例如Open Sans（https://fonts.google.com/specimen/Open+Sans）支持10个权重。如果您的基本字体为Open Sans Bold font-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版本会相关更改。

Answer 2

字体本身需要支持这个重量。

许多字体仅支持400 /普通，500 /中等和700 /粗体;有时只有400和700。

此外，/** * * @param {Message} message * * */ function help(message) { message.reply('Hello!'); message.reply('Choose from the options to get an idea of what I can do! ;)'); message.addResponseKeyboard(['Rate me', 'Set reminder', 'Info']); }和let bot = new Bot({ username: 'purppbot', apiKey: 'dba843db-18bb-45fe-b6d6-3a678f420be2', baseUrl: 'https://purppbot1-xbeastmode.c9users.io/', staticKeyboard: new Bot.ResponseKeyboard(['Help', 'Info']) });不是绝对值，而是相对于父级。 Click

Answer 3

font-weight：bolder 和 light 适用于父元素 font-weight。

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

3 个答案: