跳到主要内容

CSS 字体粗细

在网页设计中，字体粗细（font-weight）是控制文本视觉重量的重要属性。通过调整字体粗细，你可以让某些文本更加突出，或者让页面内容更具层次感。本文将详细介绍CSS中的font-weight属性，并通过示例帮助你掌握其使用方法。

什么是字体粗细？​

字体粗细指的是字体的笔画粗细程度。在CSS中，font-weight属性用于设置文本的粗细程度。它可以接受多种值，包括关键字（如normal、bold）和数值（如100、400、700等）。

font-weight属性的值​

font-weight属性可以接受以下值：

  • 关键字：

    • normal：默认值，表示正常字体粗细（通常等同于400）。
    • bold：粗体（通常等同于700）。
    • bolder：比父元素更粗的字体。
    • lighter：比父元素更细的字体。

  • 数值：

    • 100到900：数值越大，字体越粗。通常，400等同于normal，700等同于bold。
备注

并非所有字体都支持所有数值的粗细。如果指定的粗细值不可用，浏览器会自动选择最接近的可用值。

代码示例​

以下是一些使用font-weight属性的示例：

css
/* 使用关键字 */
p.normal {
  font-weight: normal;
}

p.bold {
  font-weight: bold;
}

/* 使用数值 */
p.light {
  font-weight: 300;
}

p.heavy {
  font-weight: 900;
}
html
<p class="normal">这段文字是正常粗细。</p>
<p class="bold">这段文字是粗体。</p>
<p class="light">这段文字是较细的字体。</p>
<p class="heavy">这段文字是非常粗的字体。</p>

输出效果​

  • 正常粗细：这段文字是正常粗细。
  • 粗体：这段文字是粗体。
  • 较细的字体：这段文字是较细的字体。
  • 非常粗的字体：这段文字是非常粗的字体。

实际应用场景​

1. 标题与正文的区分​

在网页设计中，标题通常需要比正文更粗的字体，以吸引用户的注意力。例如：

css
h1 {
  font-weight: 700; /* 等同于bold */
}

p {
  font-weight: 400; /* 等同于normal */
}

2. 强调重要信息​

你可以通过增加字体粗细来强调某些重要信息。例如，在警告或提示信息中使用粗体：

css
.warning {
  font-weight: bold;
  color: red;
}
html
<p class="warning">请注意：此操作不可逆！</p>

3. 响应式设计中的字体粗细调整​

在响应式设计中，你可能希望在不同设备上调整字体粗细以提高可读性。例如，在移动设备上使用较细的字体：

css
@media (max-width: 600px) {
  body {
    font-weight: 300;
  }
}

总结​

font-weight属性是控制文本粗细的重要工具。通过合理使用关键字和数值，你可以轻松调整网页中文本的视觉重量，从而提升页面的可读性和美观度。

提示

在实际项目中，建议使用相对较少的字体粗细值（如normal、bold、300、700等），以确保页面风格的一致性。

附加资源与练习​

  • 练习：尝试在你的网页中使用不同的font-weight值，观察它们对页面布局和视觉效果的影响。
  • 进一步学习：了解CSS中的其他字体相关属性，如font-family、font-size和font-style，以全面掌握字体样式的控制。

通过本文的学习，你应该已经掌握了如何使用font-weight属性来控制字体粗细。继续实践和探索，你将能够更自如地运用CSS来设计出美观且功能强大的网页。