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

多年来，我一直看到互联网上提到的

字体粗体

字体权重值，但我从未见过它被实际使用。在制作网站的任何情况下，我都无法更改

首字母

或

粗体

显示的文本

使用Chrome，我试着制作一个页面，在14个不同的段落中显示所有的字体权重值。我把它们按顺序排列：

initial

，

lighter

，

normal

，

bold

，

bold

，

100

，

200

，

300

，

400

，

500

，

600

，

700

，

800

，

900

首字母

，

打火机

，

普通

，

100

，

200

，

300

，

400

和

500

看起来都一样（不是粗体）

bold

、

bold

、

600

、

700

、

800

和

900

看起来都一样（粗体）

---

使用

font-weight:bold

实际会导致文本显示比

font-weight:bold

更粗体的情况是什么？

字体本身需要支持该粗体

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

---

此外，

粗体

和

浅色

不是绝对值，它是相对于父项的

font-weight:bolder

用于将下一级粗体设置在基准重量之上。如果您已经在使用粗体字体，但字体系列支持更粗体的字体，则此选项非常有用。例如，

opensans

（）支持10个权重。如果您的基本字体为

Open Sans Bold

font-weight:Bold

将其提升为

Open Sans Extra Bold

（如果可用）。或者，如果您使用的是

灯

，它将使其恢复正常，等等

这里有一把小提琴，它展示了一个实际的例子：

@导入url（'https://fonts.googleapis.com/css?family=Open+Sans:300400600700800’；
p{
字体系列：“开放式SAN”；
字体大小：粗体；
字体大小：36px；
}
p跨度{
字体大小：粗体
}
p、 打火机{
字号：200；
}

开放式无边框


开放式San Light Bolder

字体权重：粗体和较轻与其父元素字体权重相关。

什么字体实际支持多于默认的两种变体？我知道支持多种权重的字体是。这是付费的，但我相信你可以找到一些免费的字体，支持多种权重。仅供参考，字体权重的初始值是正常的，因此initial与normal是等价的。