CSS font-weight 属性

时间：5年前阅读：5922

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,我们将及时处理。

微信扫码关注

更新实时通知

CSS font-weight 属性

网友评论