当前第2页 返回上一页
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
<p class="sample1">加粗ABCabc123</p>
<p class="sample2">加粗ABCabc123</p>
<p class="sample3">加粗ABCabc123</p>
</body>
</html>
|
CSS代码如下
1 2 3 | p.sample1 {font-weight:200; }
p.sample2 {font-weight:400; }
p.sample3 {font-weight:800; }
|
在数值中指定的种类有100 / 200 / 300 / 400 / 500 / 600 / 600 / 600 / 800 / 900的9个阶段，实际上在浏览器中只设定了两种，在页面上只显示了最下面的800。（在值700以上的情况下和bold一样的显示）
最后，我们来看一下bolder和lighter
我们来看具体的例子
HTML代码与上述相同
CSS代码如下
1 2 3 4 | body {font-weight:bold; }
p.sample1 {font-weight:inherit; }
p.sample2 {font-weight:bolder; }
p.sample3 {font-weight:lighter; }
|
在浏览器上显示效果如下
第一行文字继承了父元素，所以显示加粗
第二行文字设置为bolder表示比父元素粗，所以与第一行元素一样。
第三行被设置为比父元素的bold更细，变成了普通的粗细。
以上就是CSS中font-weight属性怎么使用的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
css设置字体粗细的属性是什么
css中font-weight属性怎么使用
css怎么设置文字加粗
css如何设置字体粗细
font-weight:blod的跳动问题怎样用css解决
更多相关阅读请进入《font-weight》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » CSS中font-weight属性怎么使用
