• :一大波赠书活动正式来袭!满足条件的小伙伴每人赠送一本书,只限前100名!小伙伴们赶紧到碗里来!查看详情

3.5 字体粗细font-weight

一、font-weight属性

在CSS中,使用font-weight属性来定义字体粗细。

初学者要注意,字体粗细和字体大小(font-size)是不一样的,粗细指的是字体的“肥胖”,大小指的是高和宽。大家好好理解一下就很容易区分了。

语法:

font-weight:粗细值;

说明:

粗细值可以取关键字和100~900的数值。关键字如下表。

表1 font-weight属性
font-weight属性值 说明
normal 默认值,正常体
lighter 较细
bold 较粗
bolder 很粗(其实效果跟bold差不多)

字体粗细font-weight属性值可以取100、200、…、900这九个值。400相当于正常字体normal,700相当于bold。100~900分别表示字体的粗细,是对字体粗细的一种量化方式,值越大就表示越粗,值越小就表示越细。

对于中文网页来说,一般仅用到bold、normal这两个属性值完全就可以了,粗细值不建议使用数值(100~900)。

举例1:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>font-weight属性</title>
    <style type="text/css">
        #p1{font-weight:lighter;}
        #p2{font-weight:normal;}
        #p3{font-weight:bold;}
        #p4{font-weight:bolder;}
    </style>
</head>
<body>
    <p id="p1">字体粗细为:lighter</p>
    <p id="p2">字体粗细为:normal(正常字体) </p>
    <p id="p3">字体粗细为:bold</p>
    <p id="p4">字体粗细为:bolder </p>
</body>
</html>

在浏览器预览效果如下:

font-weight属性

举例2:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>font-weight属性</title>
    <style type="text/css">
        #p1{font-weight:100;}
        #p2{font-weight:400;}
        #p3{font-weight:700;}
        #p4{font-weight:900;}
    </style>
</head>
<body>
    <p id="p1">字体粗细为:100</p>
    <p id="p2">字体粗细为:400(normal) </p>
    <p id="p3">字体粗细为:700(bold)</p>
    <p id="p4">字体粗细为:900</p>
</body>
</html>

在浏览器预览效果如下:

CSS font-weight属性

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

如果你想要获取更多学习资料,或者在学习过程中遇到疑问想要得到跟教程一样最优质的解答,请通过以下方式关注我们:

(1)官方微博:

(2)新手Q群:69660533(暗号:lvye)(建议初学前端的加)

(3)官方Q群:457631216(暗号:lvye)(建议有JS基础的加)

(4)绿叶论坛:进入论坛

(5)常见问题:绿叶学习网常见问题解答

回到顶部