CSS - font-synthesis-style 屬性

CSS font-synthesis-style 屬性決定瀏覽器是否可以在缺少字型族中的斜體字型時合成斜體字型。

語法

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

屬性值

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

CSS 字型合成樣式屬性示例

以下示例說明了具有不同值的font-synthesis-style 屬性。

使用 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-style: italic;
         font-synthesis-weight: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS font-synthesis-style property
   </h2>
   <h4>
      font-synthesis-style: auto
   </h4>
   <div class="example auto">
      Property: font-synthesis-style. See how these words
      are appearing oblique as the style has been set to italic
      and synthesis has been set to the browser default.
      If the font Montserrat does not have italic, 
      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-style: italic;
         font-synthesis-style: none;
      }
   </style>
</head>

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

</html>

支援的瀏覽器

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

css_properties_reference.htm

列印頁面