font-weight的工作原理
一、使用介绍
font-weight设置文本的粗细，文本粗细设置属于一种比较复杂的字体样式定义，之所以说它复杂，是因为字体本身粗细变化千变万化，没有统一标准，对于字体粗细的具体定义也各不相同。
属性值：normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 继承值
默认值：normal。
font-weight属性值设置有3种方法：
第一种：关键字法：
关键字有2个，normal【默认值，定义标准的字符】和bold【定义粗体字符】。
第二种：相对粗细值法：
相对粗细也是由关键字定义，有2个，bolder【定义更粗的字符】和lighter【定义更细的字符】，但是它的粗细是相对于上级parent元素的继承值而言的。bolder就是匹配字体集中可用的下一级较粗字体，反之"lighter"也一样，匹配下一级较细字体。它们的参照系都是继承值，因此粗细程度都是相对于继承值而言的。
具体情况参考下图：
可用值 值的说明
normal 缺省值。字体正常显示。
bold 粗体
bolder 比粗体更加粗
lighter 比正常字体淡
100 至少和200一样淡
200 至少和100一样粗，至少和300一样淡
300 至少和200一样粗，至少和400一样淡
400 字体正常显示，相当于normal。
500 至少和400一样粗，至少和600一样淡
600 至少和500一样粗，至少和700一样淡
700 粗体，相当于bold。
800 至少和700一样粗，至少和800一样淡
900 至少和800一样粗
inherit 从父元素继承字体的粗细
注意：IE7和更早的版本不支持"inherit"的值。IE8需要定义！DOCTYPE。IE9支持"inherit"。
第三种：从"100"到"900"的9个数字序列。
这些数字代表从最细(100)到最粗(900)的字体粗细程度。
数值400相当于normal,
数值700相当于bold。
使用例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.tt{
font-weight: 400;
}
.yy{
font-weight: 700;
}
</style>
</head>
<body>
<div class="tt">例子001 font-weight: 400;</div>
<div class="yy">例子002 font-weight: 700;</div>
</body>
</html>
本文 2019-06-23 最后编辑
原文链接：https://www.qiquanji.com/post/8660.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知