• :在线测试工具暂时不可用,小伙伴们可以使用本地编辑器来代替,绿叶全新版本正在快马加鞭开发中,比心~

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属性

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

小伙伴们也可以加一下QQ群,在“群文件”中可以获取学习资源以及配套资源,以及跟其他小伙伴交流,站长也在群内。

(1)QQ群:519225291(暗号:lvye

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

回到顶部