css怎么改字体粗细

在CSS中,字体粗细可用font-weight属性修改,只需要将font-weight属性的值设置为“bold”、“bolder”、“lighter”或“500”、“600”、“700”、“800”、“900”值即可,属性值越大字体越粗。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

在CSS中,字体粗细可以使用font-weight属性修改

CSS font-weight属性

font-weight属性可以用于设置文本文字的粗细。属性值越大字体越粗。

属性值:

描述
normal认值。定义标准的字符。
bold定义粗体字符。
bolder定义更粗的字符。
lighter定义更细的字符。
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
定义由细到粗的字符。400 等同于 normal,而 700 等同于 bold。

【推荐教程:CSS视频教程

示例:

<!DOCTYPE html>
<html>
    <head>
        <Meta charset=UTF-8>
        <title>css 文字加粗</title>
        <style>
            .a1{
                font-weight:100;
            }
            .a2{
                font-weight:200;
            }
			.a3{
			    font-weight:300;
			}
			.a4{
                font-weight:400;
            }
            .a5{
                font-weight:500;
            }
			.a6{
			    font-weight:600;
			}
			.a7{
                font-weight:700;
            }
            .a8{
                font-weight:800;
            }
			.a9{
			    font-weight:900;
			}
        </style>
    </head>
    <body>
        <div>
            <p>这是一段测试文字--认粗细</p>
			<p class=a1>这是一段测试文字</p>
			<p class=a2>这是一段测试文字</p>
			<p class=a3>这是一段测试文字</p>
			<p class=a4>这是一段测试文字</p>
			<p class=a5>这是一段测试文字</p>
			<p class=a6>这是一段测试文字</p>
			<p class=a7>这是一段测试文字</p>
			<p class=a8>这是一段测试文字</p>
			<p class=a9>这是一段测试文字</p>
        </div>
    </body>
</html>

1.png

更多编程相关知识,请访问:编程视频!!

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效