CSS - font-synthesis 属性

CSS font-synthesis 属性决定浏览器是否应该合成在指定的字体系列中缺失的粗体、斜体和/或小型大写字体。它是以下属性的简写属性：font-synthesis-weight、font-synthesis-style、font-synthesis-small-caps 和 font-synthesis-position

语法

font-synthesis: none | weight | style | small-caps | position | initial | inherit;

属性值

值	描述
none	表示浏览器不能合成任何粗体、斜体或小型大写字体。默认值。
weight	表示如果需要，浏览器可以合成缺失的粗体字体。
style	表示如果需要，浏览器可以合成斜体字体。
small-caps	表示如果需要，浏览器可以合成小型大写字体。
position	表示如果需要，浏览器可以合成下标和上标字体。
initial	将属性设置为其初始值。
inherit	从父元素继承该属性。

CSS font-synthesis 属性示例

以下示例解释了使用不同值的 font-synthesis 属性。

使用 none 值的 font-synthesis 属性

为了不让浏览器在指定的字体没有粗体、斜体或小型大写字体时合成它们，我们使用 none 值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         margin-bottom: 20px;
         padding: 10px;
         border: 1px solid #ddd;
      }

      .no-synthesis {
         font-family: "Arial", sans-serif;
         font-weight: bold;
         font-style: italic;
         font-synthesis: none;
      }
   </style>
</head>

<body>
   <h2>
      CSS font-synthesis property
   </h2>
   <h4>
      font-synthesis: none
   </h4>
   <div class="example no-synthesis">
      This text is styled with `font-synthesis: none;`.
      The browser will not synthesize any styles. 
      If the Arial font does not have a bold or 
      italic variant, those styles will not appear.
   </div>
</body>

</html>

使用 weight 值的 font-synthesis 属性

为了让浏览器在指定的字体没有粗体字体时合成它，我们使用 weight 值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         margin-bottom: 20px;
         padding: 10px;
         border: 1px solid #ddd;
      }

      .synthesize-weight {
         font-family: "Arial", sans-serif;
         font-weight: bold;
         font-synthesis: weight;
      }
   </style>
</head>

<body>
   <h2>
      CSS font-synthesis property
   </h2>
   <h4>
      font-synthesis: weight
   </h4>
   <div class="example synthesize-weight">
      This text is styled with `font-synthesis: weight;`.
      The browser will synthesize a bold version 
      if Arial does not include it.
   </div>
</body>

</html>

使用 style 值的 font-synthesis 属性

为了让浏览器在指定的字体没有斜体字体时合成它，我们使用 style 值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         margin-bottom: 20px;
         padding: 10px;
         border: 1px solid #ddd;
      }

      .synthesize-style {
         font-family: "Arial", sans-serif;
         font-style: italic;
         font-synthesis: style;
      }
   </style>
</head>

<body>
   <h2>
      CSS font-synthesis property
   </h2>
   <h4>
      font-synthesis: style
   </h4>
   <div class="example synthesize-style">
      This text is styled with `font-synthesis: style;`.
      The browser will synthesize an italic version
      if Arial does not include it.
   </div>
</body>

</html>

使用 small-caps 值的 font-synthesis 属性

为了让浏览器在指定的字体没有小型大写字体时合成它，我们使用 small-caps 值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         margin-bottom: 20px;
         padding: 10px;
         border: 1px solid #ddd;
      }

      .synthesize-small-caps {
         font-family: "Arial", sans-serif;
         font-variant-caps: small-caps;
         font-synthesis: small-caps;
      }
   </style>
</head>

<body>
   <h2>
      CSS font-synthesis property
   </h2>
   <h4>
      font-synthesis: style
   </h4>
   <div class="example synthesize-small-caps">
      This has `font-synthesis: small-caps;`. The browser
      will synthesize a small-caps version if Arial does
      not include it.
   </div>
</body>

</html>

使用 position 值的 font-synthesis 属性

为了让浏览器在指定的字体没有下标和上标字体时合成它们，我们使用 position 值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         margin-bottom: 20px;
         padding: 10px;
         border: 1px solid #ddd;
         font-family: "Arial", sans-serif;
         font-synthesis: position;
      }

      .synthesize-pos1 {
         font-variant-position: sub;
      }

      .synthesize-pos2 {
         font-variant-position: super;
      }
   </style>
</head>

<body>
   <h2>
      CSS font-synthesis property
   </h2>
   <h4>
      font-synthesis: position
   </h4>
   <div class="example synthesize-pos1 synthesize-pos2">
      This text has `font-synthesis: position;`. The browser
      will synthesize a 
   <sup>
      superscript
   </sup> and 
   <sub>
      subscript
   </sub> 
      Arial text if it does not include it.
   </div>
</body>

</html>

支持的浏览器

属性
font-synthesis	97	97	34	9	83

css_properties_reference.htm

打印页面