CSS - font-synthesis-weight 属性

CSS font-synthesis-weight 决定浏览器是否可以在字体家族中缺少粗体字体时合成粗体字体。

语法

font-synthesis-weight: auto | none | initial | inherit;

属性值

值	描述
auto	它指定浏览器可以合成丢失的粗体字体。默认值。
none	它指定不允许浏览器合成丢失的粗体字体。
initial	它将属性设置为其初始值。
inherit	它从父元素继承属性。

CSS 字体合成权重属性示例

以下示例说明了使用不同值的 font-synthesis-weight 属性。

使用 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-weight: bold;
         font-synthesis-weight: auto;
      }
   </style>
</head>

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

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

</html>

支持的浏览器

属性
font-synthesis-weight	97	97	111	16.4	83

css_properties_reference.htm

打印页面