CSS - font-synthesis 屬性

CSS font-synthesis 屬性決定瀏覽器是否應該合成在指定的字體系列中缺失的粗體、斜體和/或小型大寫字型。它是以下屬性的簡寫屬性：font-synthesis-weight、font-synthesis-style、font-synthesis-small-caps 和 font-synthesis-position

語法

font-synthesis: none | weight | style | small-caps | position | initial | inherit;

屬性值

值	描述
none	表示瀏覽器不能合成任何粗體、斜體或小型大寫字型。預設值。
weight	表示如果需要，瀏覽器可以合成缺失的粗體字型。
style	表示如果需要，瀏覽器可以合成斜體字型。
small-caps	表示如果需要，瀏覽器可以合成小型大寫字型。
position	表示如果需要，瀏覽器可以合成下標和上標字型。
initial	將屬性設定為其初始值。
inherit	從父元素繼承該屬性。

CSS font-synthesis 屬性示例

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

使用 none 值的 font-synthesis 屬性

為了不讓瀏覽器在指定的字型沒有粗體、斜體或小型大寫字型時合成它們，我們使用 none 值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         margin-bottom: 20px;
         padding: 10px;
         border: 1px solid #ddd;
      }

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

<body>
   <h2>
      CSS font-synthesis property
   </h2>
   <h4>
      font-synthesis: none
   </h4>
   <div class="example no-synthesis">
      This text is styled with `font-synthesis: none;`.
      The browser will not synthesize any styles. 
      If the Arial font does not have a bold or 
      italic variant, those styles will not appear.
   </div>
</body>

</html>

使用 weight 值的 font-synthesis 屬性

為了讓瀏覽器在指定的字型沒有粗體字型時合成它，我們使用 weight 值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         margin-bottom: 20px;
         padding: 10px;
         border: 1px solid #ddd;
      }

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

<body>
   <h2>
      CSS font-synthesis property
   </h2>
   <h4>
      font-synthesis: weight
   </h4>
   <div class="example synthesize-weight">
      This text is styled with `font-synthesis: weight;`.
      The browser will synthesize a bold version 
      if Arial does not include it.
   </div>
</body>

</html>

使用 style 值的 font-synthesis 屬性

為了讓瀏覽器在指定的字型沒有斜體字型時合成它，我們使用 style 值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         margin-bottom: 20px;
         padding: 10px;
         border: 1px solid #ddd;
      }

      .synthesize-style {
         font-family: "Arial", sans-serif;
         font-style: italic;
         font-synthesis: style;
      }
   </style>
</head>

<body>
   <h2>
      CSS font-synthesis property
   </h2>
   <h4>
      font-synthesis: style
   </h4>
   <div class="example synthesize-style">
      This text is styled with `font-synthesis: style;`.
      The browser will synthesize an italic version
      if Arial does not include it.
   </div>
</body>

</html>

使用 small-caps 值的 font-synthesis 屬性

為了讓瀏覽器在指定的字型沒有小型大寫字型時合成它，我們使用 small-caps 值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         margin-bottom: 20px;
         padding: 10px;
         border: 1px solid #ddd;
      }

      .synthesize-small-caps {
         font-family: "Arial", sans-serif;
         font-variant-caps: small-caps;
         font-synthesis: small-caps;
      }
   </style>
</head>

<body>
   <h2>
      CSS font-synthesis property
   </h2>
   <h4>
      font-synthesis: style
   </h4>
   <div class="example synthesize-small-caps">
      This has `font-synthesis: small-caps;`. The browser
      will synthesize a small-caps version if Arial does
      not include it.
   </div>
</body>

</html>

使用 position 值的 font-synthesis 屬性

為了讓瀏覽器在指定的字型沒有下標和上標字型時合成它們，我們使用 position 值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         margin-bottom: 20px;
         padding: 10px;
         border: 1px solid #ddd;
         font-family: "Arial", sans-serif;
         font-synthesis: position;
      }

      .synthesize-pos1 {
         font-variant-position: sub;
      }

      .synthesize-pos2 {
         font-variant-position: super;
      }
   </style>
</head>

<body>
   <h2>
      CSS font-synthesis property
   </h2>
   <h4>
      font-synthesis: position
   </h4>
   <div class="example synthesize-pos1 synthesize-pos2">
      This text has `font-synthesis: position;`. The browser
      will synthesize a 
   <sup>
      superscript
   </sup> and 
   <sub>
      subscript
   </sub> 
      Arial text if it does not include it.
   </div>
</body>

</html>

支援的瀏覽器

屬性
font-synthesis	97	97	34	9	83

css_properties_reference.htm

列印頁面