font-weight 属性用于设置字体的粗细。
但是有些字体没有设置所有的宽度。
它们仅以普通或者粗体提供。
Arial、Helvetica、Georgia 等常见字体没有 400 和 700 以外的宽度。
| 初始值 | normal |
|---|---|
| 应用于 | 所有元素。它还适用于伪元素::first-letter 和 ::first-line。 |
| 继承 | 可继承 |
| 可动画的 | 是的。 |
| 版本 | CSS1. |
| DOM 语法 | object.style.fontweight ="bolder"; |
语法
font-weight: normal | bold | bolder | lighter | number | initial | inherit;
font-weight 属性的示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.bolder {
font-weight: bolder;
}
</style>
</head>
<body>
<h2>Font-weight 属性示例</h2>
<p class="bolder">We used a bolder text here.</p>
</body>
</html>
具有所有值的 font-weight 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.normal {
font-weight: normal;
}
p.lighter {
font-weight: lighter;
}
p.bold {
font-weight: bold;
}
p.bolder {
font-weight: bolder;
}
p.fweight {
font-weight: 600;
}
</style>
</head>
<body>
<h2>Font-weight 属性示例</h2>
<p class="normal">我们在这里使用了正常宽度。</p>
<p class="lighter">这是一个更轻的宽度。</p>
<p class="bold">我们在这里使用了粗体。</p>
<p class="bolder">我们在这里使用了更粗的文字。</p>
<p class="fweight">我们在这里设置 font-weight 600。</p>
</body>
</html>
CSS font-weight 属性值说明
| 值 | 描述 |
|---|---|
| normal | 意味着文本字符将是正常的。这是此属性的默认值。 |
| bold | 定义厚实的字符。 |
| bolder | 在文本中定义更厚的字符。 |
| lighter | 定义更轻的字符。 |
| 100200300400500600700800900 | 我们可以使用这些值将文本字符从较薄设置为粗体。 400相同的重量正常，而700使字符与粗体相同。 |
| initial | 使属性使用其默认值。 |
| inherit | 从父母元素继承属性。 |
日期：2020-06-02 22:14:32 来源：oir作者：oir