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>

支持的浏览器

属性 Chrome Edge Firefox Safari Opera
font-synthesis-small-caps 97 97 111 16.4 83
css_properties_reference.htm
广告