昨天说了CSS字体属性的大小，font-family, 今天我们来一起学习下字体属性的字体粗细 font-weight
还是使用昨天的那首诗，让诗句中的最后一句显示粗体，看下效果:
可以看到最后一句显示粗体了，我们来查看下对应的代码:
<! DOCTYPE html >
< html lang="en" >
< head >
< meta charset="UTF-8" >
< meta http-equiv="X-UA-Compatible" content="IE=edge" >
< meta name="viewport" content="width=device-width, initial-scale=1.0" >
< title >CSS字体属性之字体粗细和样式</ title >
< style >
.bold {
font-weight:bold;
}
</ style >
</ head >
< body >
< h2 >明月几时有</ h2 >
< p >明月几时有，把酒问青天</ p >
< p >不知天上宫阙，今夕是何年</ p >
< p >我欲乘风归去，又恐琼楼玉宇</ p >
< p >高处不胜寒，起舞弄清影，何似在人间。</ p >
< p >人有悲欢离合，月有阴晴圆缺，此事古难全</ p >
< p class="bold" >但愿人长久，千里共婵娟。</ p >
</ body >
</ html >
字体粗细中的参数包括: normal | bold | bolder | lighter | number(自定义)
我们来试试lighter和number自定义吧
可以看到红框的字体都已经设置好了，对应的代码为:
<! DOCTYPE html >
< html lang="en" >
< head >
< meta charset="UTF-8" >
< meta http-equiv="X-UA-Compatible" content="IE=edge" >
< meta name="viewport" content="width=device-width, initial-scale=1.0" >
< title >CSS字体属性之字体粗细和样式</ title >
< style >
.bold {
font-weight:bold;
}
.lighter {
font-weight:lighter;
}
.number {
font-weight: 900;
}
</ style >
</ head >
< body >
< h2 >明月几时有</ h2 >
< p class="lighter" >明月几时有，把酒问青天</ p >
< p >不知天上宫阙，今夕是何年</ p >
< p class="number" >我欲乘风归去，又恐琼楼玉宇</ p >
< p >高处不胜寒，起舞弄清影，何似在人间。</ p >
< p >人有悲欢离合，月有阴晴圆缺，此事古难全</ p >
< p class="bold" >但愿人长久，千里共婵娟。</ p >
</ body >
</ html >
这里需要记住的一点，number自定义数字后不需要加上px
那么是否可以对标题的字体进行粗细设置呢？
答案是可以的，一起来看下
可以看到标题中的字体变为正常的了，对应的代码如下:
<! DOCTYPE html >
< html lang="en" >
< head >
< meta charset="UTF-8" >
< meta http-equiv="X-UA-Compatible" content="IE=edge" >
< meta name="viewport" content="width=device-width, initial-scale=1.0" >
< title >CSS字体属性之字体粗细和样式</ title >
< style >
.bold {
font-weight:bold;
}
.lighter {
font-weight:lighter;
}
.number {
font-weight: 900;
}
h2 {
font-weight: normal;
}
</ style >
</ head >
< body >
< h2 >明月几时有</ h2 >
< p class="lighter" >明月几时有，把酒问青天</ p >
< p >不知天上宫阙，今夕是何年</ p >
< p class="number" >我欲乘风归去，又恐琼楼玉宇</ p >
< p >高处不胜寒，起舞弄清影，何似在人间。</ p >
< p >人有悲欢离合，月有阴晴圆缺，此事古难全</ p >
< p class="bold" >但愿人长久，千里共婵娟。</ p >
</ body >
</ html >
加上了对h2的字体设置
好的，今天就是我们对字体粗细的学习，大家加油，十一马上就要结束了，88