CSS - font-synthesis-small-caps 屬性

CSS font-synthesis-small-caps 確定瀏覽器是否可以合成小寫大寫字型，當字體系列中缺少此字型時。它們表示大寫字母，但以小寫字母的縮小尺寸顯示。

語法

font-synthesis-small-caps: auto | none | initial | inherit;

屬性值

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

CSS 字型合成小寫大寫屬性示例

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

使用 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-variant: small-caps;
         font-synthesis-small-caps: auto;
      }
   </style>
</head>

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

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

</html>

支援的瀏覽器

屬性
font-synthesis-small-caps	97	97	111	16.4	83

css_properties_reference.htm

列印頁面