CSS - font-synthesis-weight 屬性

CSS font-synthesis-weight 決定瀏覽器是否可以在字型家族中缺少粗體字型時合成粗體字型。

語法

font-synthesis-weight: auto | none | initial | inherit;

屬性值

值	描述
auto	它指定瀏覽器可以合成丟失的粗體字型。預設值。
none	它指定不允許瀏覽器合成丟失的粗體字型。
initial	它將屬性設定為其初始值。
inherit	它從父元素繼承屬性。

CSS 字型合成權重屬性示例

以下示例說明了使用不同值的 font-synthesis-weight 屬性。

使用 Auto 值的字型合成權重屬性

為了讓瀏覽器在指定字型不支援的情況下合成權重，我們使用 auto 值。這是預設值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      @import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
      .example {
         margin-bottom: 20px;
         padding: 20px;
         border: 1px solid #ddd;
      }

      .auto {
         font-family: "Montserrat", sans-serif;
         font-weight: bold;
         font-synthesis-weight: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS font-synthesis-weight property
   </h2>
   <h4>
      font-synthesis-weight: auto
   </h4>
   <div class="example auto">
      Property: font-synthesis-weight. See how these words
      are appearing bold as the weight has been set to bold
      and synthesis has been set to the browser default.
      If the font Montserrat does not have bold, 
      then the browser will synthesize it.
   </div>
</body>

</html>

使用 None 值的字型合成權重屬性

為了防止瀏覽器即使在指定字型支援的情況下也合成權重，我們使用 none 值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      @import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
      .example {
         margin-bottom: 20px;
         padding: 20px;
         border: 1px solid #ddd;
      }

      .none {
         font-family: "Montserrat", sans-serif;
         font-weight: bold;
         font-synthesis-weight: none;
      }
   </style>
</head>

<body>
   <h2>
      CSS font-synthesis-weight property
   </h2>
   <h4>
      font-synthesis-weight: none
   </h4>
   <div class="example none">
      property: font-synthesis-weight. See how these words
      are not appearing bold even though their weight is
      bold. This is because the font-synthesis-weight has
      been set to none. Even if the font Montserrat has bold
      support, the browser will disable it.
   </div>
</body>

</html>

支援的瀏覽器

屬性
font-synthesis-weight	97	97	111	16.4	83

css_properties_reference.htm

列印頁面