字体粗细的使用-CSS入门基础（007）

最新推荐文章于 2023-04-15 21:36:02 发布

虾米大王

最新推荐文章于 2023-04-15 21:36:02 发布

阅读量1.6k

点赞数 1

分类专栏： CSS 文章标签： html html5 css css3 javascript

本文链接：https://blog.csdn.net/modern358/article/details/110942386

版权

CSS 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

今天我们接着分享字体的内容。

在css中，我们使用font-weight属性来定义字体粗细。字体的粗细和字体的大小是不一样的，粗细指的是字体的肥瘦，而大小指的是字体的高宽。

语法：

font-weight：粗细值

属性取值有两种，一种是关键字，一种是100~900之间的数值。

关键字：

font-weight属性取值
属性值	说明
normal	默认值，正常
lighter	较细
bold	较粗
bolder	很粗

属性取值：

100，200，300，400，500，600，700，800，900；其中400相当于字体normal，700相当于bold。100表示最细，900表示最粗，值越大表示越粗，值越小表示越细。

在实际开发中，对于中文网页，一般仅用到bold、normal两个属性，不建议使用数值作为font-weight属性值。

示例代码：

<html>  <head>    <title>字体粗细</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>

示例代码：

<html>  <head>    <title>字体粗细</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</p>    <p id="p3">字体粗细为：700</p>    <p id="p4">字体粗细为：900</p>  </body></html>

font-style字体斜体：

之前我们在分享关于HTML中斜体时，说到今后我们介绍关于css的斜体，这个就是css中字体斜体的属性。

语法：

font-style:属性值；

font-sytle
属性值	说明
normal	默认值，正常体
italic	斜体

示例代码：

<html>  <head>    <title>字体斜体</title>    <style type="text/css">      #p1 { font-style:normal;}      #p2 { font-style:italic;}      #p3 { font-style:oblique;}    </style>  </head>  <body>    <p id="p1">字体样式为normal</p>    <p id="p2">字体样式为italic</p>    <p id="p3">字体样式为oblique</p>  </body></html>

从上面代码中，可以发现属性值italic和oblique，都可以表示斜体，但是他们二者是有区别的。

区别在于，italic是字体的一个属性，但是并非所有的字体都有italic属性，而oblique则是将字体直接进行倾斜设置。

CSS注释：

在HTML中，为了代码便于理解，查找或者对于代码的作用进行提示等，我们需要给代码加注释。在HTML中，注释的写法如下，

HTML注释<!--注释内容-->

而在css中，注释写入如下，

CSS注释/*注释的内容*/

/*表示注释开始，*/表示注释结束。

示例代码：

<html>  <head>    <title>css注释</title>    <style type="text/css">      /*我是css注释，负责解释div元素选择器的内容*/      div      {        width:200px;        height:60px;      }      /*我是css注释，负责解释id选择器的内容*/      #area2 { background-color:green;}    </style>  </head>  <body>    <!--我是HTML注释，负责解释区域一-->    <div>区域一</div>    <!--我是HTML注释，负责解释区域二-->    <div id="area2">区域二</div>  </body></html>