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	從父元素繼承屬性。

CSS字型粗細屬性示例

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

使用normal值的字型粗細屬性

要將普通字型粗細應用於文字，我們使用normal值。這在以下示例中顯示。

示例

<!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值相比，字元看起來要粗得多。這在以下示例中顯示。

示例

<!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值要粗得多。這在以下示例中顯示。

示例

<!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值。字元看起來很細。這在以下示例中顯示。

示例

<!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，這些表示厚度的遞增順序。以下示例中使用了一些值。

示例

<!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

列印頁面