CSS - font-synthesis-small-caps 属性_CSS 菜鸟教程

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 属性</h2>
   <h4>font-synthesis-small-caps: auto</h4>
   <div class="example auto">
属性：字体合成小写。看看这些词
由于该品种已经上市，因此出现了小盘股
设置为小写，浏览器已设置合成
默认值。如果字体Montserrat没有小大写
然后浏览器会合成它。
   </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 属性示例</h2>
   <h4>font-synthesis-small-caps: none</h4>
   <div class="example none">
属性：字体合成小写。看看这些词
即使它们的品种繁多，也不会出现在小首都
小帽。这是因为字体合成小大写有
被设置为无。即使字体Montserrat有小写字母
支持，浏览器将禁用它。
   </div>
</body>

</html>

支持的浏览器

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

<< CSS - color 属性