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

打印页面