Register
> 博客>

css加粗字体代码

新星源码网 1月 24日 1 0

在CSS中，你可以使用font-weight属性来设置文本的粗细。常用的值包括normal、bold、bolder、lighter，以及使用数字表示粗细的程度，如100到900。

css
/* 通过类选择器设置加粗 */
.bold-text {
  font-weight: bold;
}

/* 通过元素选择器设置加粗 */
p {
  font-weight: bold;
}

/* 使用数字表示粗细 */
.custom-bold {
  font-weight: 700; /* 可以根据需要选择合适的数值 */
}

在HTML中，你可以使用类选择器或直接在元素上应用样式，如下所示：

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .bold-text {
      font-weight: bold;
    }

    p {
      font-weight: bold;
    }

    .custom-bold {
      font-weight: 700;
    }
  </style>
  <title>CSS加粗字体</title>
</head>
<body>
  <p class="bold-text">这是加粗的文本。</p>
  <p>这是加粗的文本。</p>
  <p class="custom-bold">这是使用数字表示粗细的文本。</p>
</body>
</html>


css
.custom-font {
  font: bold 16px/1.5 'Arial', sans-serif;
  /* 
    第一个值是 font-weight: bold;
    第二个值是 font-size: 16px;
    第三个值是 line-height: 1.5;
    第四个值是 font-family: 'Arial', sans-serif;
  */
}

在这个例子中，font 属性中的第一个值是 font-weight，设置为 bold。你可以根据需要调整其他值。

在HTML中应用这个样式：

html
<p class="custom-font">这是使用 font 属性设置的加粗文本。</p>

除了这些基本的加粗方法，你还可以使用Web字体或其他字体库，以及图标字体等方式来增强文本样式。希望这些信息对你有帮助，如果有其他问题，请随时问！

Related

热门文章

微海报