CSS - font-weight 属性

CSS font-weight 属性改变元素中字符的视觉粗细。字体粗细指的是字符的厚度或粗细。

语法

font-weight: normal | bold | bolder | lighter | number | initial | inherit;

属性值

值	描述
normal	定义普通字体粗细。
bold	定义粗体字体粗细。
bolder	定义更粗的字体粗细。
lighter	定义更细的字体粗细。
数字 (100-900)	字体粗细由数字定义，从细到粗。400 等同于 normal，700 等同于 bold。
initial	将属性设置为其初始值。
inherit	从父元素继承属性。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS字体粗细属性示例

以下示例解释了使用不同值的font-weight属性。

使用normal值的字体粗细属性

要将普通字体粗细应用于文本，我们使用normal值。这在以下示例中显示。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
  <style>
    p {
      font-weight: normal;
    }
  </style>
</head>

<body>
  <h2>
    CSS font-weight property
  </h2>
  <h4>
    font-weight: normal
  </h4>
  <p>
    TutorialsPoint offers a wide range of online
    tutorials and courses on programming, web development,
    and various technology topics. It provides 
    comprehensive, user-friendly resources for
    learners at all skill levels.
  </p>
</body>

</html>

使用bold值的字体粗细属性

要将粗体字体粗细应用于文本，我们使用bold值。与normal值相比，字符看起来要粗得多。这在以下示例中显示。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
  <style>
    p {
      font-weight: bold;
    }
  </style>
</head>

<body>
  <h2>
    CSS font-weight property
  </h2>
  <h4>
    font-weight: bold
  </h4>
  <p>
    TutorialsPoint offers a wide range of online
    tutorials and courses on programming, web development,
    and various technology topics. It provides 
    comprehensive, user-friendly resources for
    learners at all skill levels.
  </p>
</body>

</html>

使用bolder值的字体粗细属性

要将更粗的字体粗细应用于文本，我们使用bolder值。使用此值的字符比bold值要粗得多。这在以下示例中显示。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
  <style>
    p {
      font-weight: bolder;
    }
  </style>
</head>

<body>
  <h2>
    CSS font-weight property
  </h2>
  <h4>
    font-weight: bolder
  </h4>
  <p>
    TutorialsPoint offers a wide range of online
    tutorials and courses on programming, web development,
    and various technology topics. It provides 
    comprehensive, user-friendly resources for
    learners at all skill levels.
  </p>
</body>

</html>

使用lighter值的字体粗细属性

要将更细的字体粗细应用于文本，我们使用lighter值。字符看起来很细。这在以下示例中显示。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
  <style>
    p {
      font-weight: lighter;
    }
  </style>
</head>

<body>
  <h2>
    CSS font-weight property
  </h2>
  <h4>
    font-weight: lighter
  </h4>
  <p>
    TutorialsPoint offers a wide range of online
    tutorials and courses on programming, web development,
    and various technology topics. It provides 
    comprehensive, user-friendly resources for
    learners at all skill levels.
  </p>
</body>

</html>

使用数值的字体粗细属性

文本的字体粗细也可以用数值提供。数值可以是100到900，这些表示厚度的递增顺序。以下示例中使用了一些值。

示例

Open Compiler

<!DOCTYPE html>
<html>

<head>
  <style>
    #first {
      font-weight: 500;
    }
    #second{
      font-weight: 700;
    }
  </style>
</head>

<body>
  <h2>
    CSS font-weight property
  </h2>
  <h4>
    font-weight: 500
  </h4>
  <p id="first">
    TutorialsPoint offers a wide range of online
    tutorials and courses on programming, web development,
    and various technology topics. It provides 
    comprehensive, user-friendly resources for
    learners at all skill levels.
  </p>
  <h4>
    font-weight: 700
  </h4>
  <p id="second">
    TutorialsPoint offers a wide range of online
    tutorials and courses on programming, web development,
    and various technology topics. It provides 
    comprehensive, user-friendly resources for
    learners at all skill levels.
  </p>
</body>

</html>

支持的浏览器

属性
font-weight	2.0	4.0	1.0	1.3	3.5

css_properties_reference.htm

打印页面