font-weight
语法
- font-weight:normal | bold | bolder | lighter | <integer>
- 默认值:normal
- 适用于:所有元素
- 继承性:有
- 动画性:是
- 计算值:数字重量值
取值
- normal:正常的字体。相当于数字值400
- bold:粗体。相当于数字值700。
- bolder:定义比继承值更重的值
- lighter:定义比继承值更轻的值
- <integer>:用数字表示文本字体粗细。取值范围:100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
说明
设置或检索对象中的文本字体的粗细。
- 作用由客户端系统安装的字体的特定字体变量映射决定。系统选择最近的匹配。也就是说,用户可能看不到不同值之间的差异。
- 对应的脚本特性为fontWeight。
兼容性
<table class="compatible">
Values
IE
Firefox
Chrome
Safari
Opera
iOS Safari
Android Browser
Android Chrome
示例
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<style>
.test p{margin:15px 0;border:1px solid #000;}
.normal p{font-weight:normal;}
.bold p{font-weight:bold;}
.bolder p{font-weight:bolder;}
.lighter p{font-weight:lighter;}
.number p{font-weight:700;}
</style>
</head>
<body>
<ul class="test">
<li class="normal">
<strong>正常的字体:</strong>
<p>本段文字将显示为正常的字体。</p>
</li>
<li class="bold">
<strong>粗体:</strong>
<p>本段文字将显示为粗体。</p>
</li>
<li class="bolder">
<strong>特粗体:</strong>
<p>本段文字将显示为特粗体。</p>
</li>
<li class="lighter">
<strong>细体:</strong>
<p>本段文字将显示为细体。</p>
</li>
<li class="number">
<strong>用number值表示粗体:</strong>
<p>本段文字将显示为粗体。</p>
</li>
</ul>
</body>
</html>