CSS @font-face - font-weight

font-weight CSS 描述符允許作者在@font-face @規則中指定指定字型的字型粗細。

font-weight 描述符專用於指定字型的粗細，即字型應顯得多粗或多細。這些字型對應於同一字體系列的不同樣式。

描述符font-weight採用與其對應的font-weight屬性相同的值。

font-weight 描述符不應與font-weight 屬性混淆。font-weight 描述符僅與@font-face @規則一起使用，以顯式地為該規則選擇粗體字型。然後，font-weight 屬性在樣式表中的其他位置使用，以將該字型粗細應用於元素。

對於特定的字體系列，可用的粗細有限，如果指定的粗細不存在，則使用附近的粗細。缺少粗體字型的字型由使用者代理合成。為了避免這種情況，可以使用簡寫屬性font-synthesis。

可能的值

font-weight CSS 描述符可以具有以下值之一

normal：指定普通字型粗細，等於 400。
bold：指定粗體字型粗細，等於 700。
<number>：指定1 到 1000（含）之間的<number> 值。較高的值對應於比較低值更粗的字型。

語法

font-weight = auto | normal | bold | <number [1,1000]> ]";

CSS font-weight - 權重名稱對映

下表說明數值及其對應的常用權重名稱的對映

值	常用權重名稱
100	纖細 (髮絲線)
200	超細 (超輕)
300	細
400	普通
500	中等
600	半粗體 (中粗體)
700	粗體
800	超粗體 (超粗)
900	黑色 (加粗)

CSS font-weight - 可變字型

許多字型具有特定的粗細，對應於上表中常用權重名稱對映中的數字之一。但是，有些字型支援範圍更廣的粗細，精度更高，這些字型稱為可變字型。它們使使用者可以更好地控制他們選擇的字型粗細。

TrueType 或OpenType 可變字型的wght 變體可用於實現不同的粗細。

輔助功能注意事項：font-weight 等於100（纖細/髮絲線）或200（超細）的字型，尤其是在字型對比度顏色比低的字型中，對於視力較差的人來說可能不太清晰。

CSS font-weight - 數值

以下示例演示了使用@font-face @規則中使用的100 和 900 範圍設定字型粗細值。

<html>
<head> 
<style>
  @font-face {
      font-family: "f1";
      src: url("font/Brygada1918-Italic.ttf");
      font-weight: 100,900;
      }

   .container {
      font: 2.5rem "f1", sans-serif;
   }

   .font-wt-400 {
      font-weight: 400;
   }

   .font-wt-bold {
      font-weight: bold;
   }

   .font-wt-900 {
      font-weight: 900;
   }
</style>
</head>
<body>
      <p class="container font-wt-400">font - 400</p>
      <p class="container font-wt-bold">font - bold</p>
      <p class="container font-wt-900">font - 900</p>
</body>
</html>

列印頁面