font-weight 字体粗细

基本语法

font-weight: 粗细值;

关键字

值	说明	对应数值
`normal`	正常粗细	400
`bold`	加粗	700
`lighter`	比父元素更细	-
`bolder`	比父元素更粗	-

数值

数值	说明
`100`	最细
`200`	很细
`300`	细
`400`	正常(默认)
`500`	中等
`600`	半粗
`700`	粗
`800`	很粗
`900`	最粗

示例

<style>
  .box {
    font-weight: normal;  /* 正常值与400一样 */
  }
  .box2 {
    font-weight: bold;    /* bold与700一样 */
  }
  .box3 {
    font-weight: lighter; /* 比父元素更细 */
  }
  .box4 {
    font-weight: bolder;  /* 比父元素更粗 */
  }
</style>
<body>
  <div class="box">font-weight用来控制文字粗细</div>
  <div class="box2">加粗文字</div>
  <div class="box3">更细文字</div>
  <div class="box4">更粗文字</div>
</body>

实际应用

/* 标题加粗 */
h1, h2, h3 {
  font-weight: bold;
}

/* 强调文字 */
.highlight {
  font-weight: bold;
}

/* 次要文字 */
.muted {
  font-weight: normal;
}

学习要点

常用值: normal(400), bold(700)
数值范围: 100-900
相对值: lighter, bolder 相对于父元素
应用场景: 标题加粗、强调文字

css css学习