CSS - font-variant-alternates 屬性

font-variant-alternates CSS 屬性用於控制在字型中給定字元的備用字形的用法。

可能的值

1. normal：停用備用字形。

2. 以下關鍵字中的一個或多個：

historical-forms：啟用歷史備用字形。對應於 OpenType 值 hist。
stylistic()：為單個字元啟用風格化備用字形。對應於 OpenType 值 salt (salt 2)。
styleset()：為字元集啟用風格化備用字形。字型特定名稱對映到一個數字。對應於 OpenType 值 ssXY (ss02)。
character-variant()：類似於 styleset()，但不為一組字元建立連貫的字形，而是為單個字元建立。OpenType 值 cvXY (cv02)。
swash()：啟用裝飾字形。字型特定名稱對映到一個數字。對應於 OpenType 值 swsh (swsh 2) 和 cswh (cswh 2)。
ornaments()：啟用裝飾和其它裝飾字形。字型特定名稱對映到一個數字。對應於 OpenType 值 ornm (ornm 2)
annotation()：啟用註釋，例如反向字元或帶圓圈的數字。字型特定名稱對映到一個數字。對應於 OpenType 值 nalt (nalt 2)

應用於

所有 HTML 元素。

DOM 語法

object.style.fontVariantAlternates = "normal | swash() | stylistic() | styleset() | character-variant() | ornaments()";

CSS font-variant-alternates - swash() 的用法

以下示例演示了 swash() 函式的用法，該函式接受一個引數，該引數是對映到數字的字型特定名稱。@font-feature-values at-rule 用於為“SansationLight”字型的裝飾功能定義一個名稱。稍後，font-variant-alternate 屬性將裝飾名稱作為值。

<html>
<head>
<style>
   @font-face {
      font-family: "f1";
      src: url("font/SansationLight.woff");
   }

   @font-feature-values "f1" {
      @swash {
         fancy: 2;
      }
   }

   h1 {
      font-family: "f1";
      font-size: 3rem;
   }

   p {
      background-color: aqua;
   }

   .variant {
      font-variant-alternates: swash(fancy);
      font-size: 4rem;
   }
</style>
</head>
<body>
   <h1>Heading without variant</h1>
   <h1 class="variant">Heading with variant</h1>
</body>
</html>

CSS font-variant-alternates - stylistic() 的用法

以下示例演示了 stylistic() 函式的用法，該函式接受一個引數，該引數是對映到數字的字型特定名稱。@font-feature-values at-rule 用於為“SansationLight”字型的裝飾功能定義一個名稱。稍後，font-variant-alternate 屬性將帶有所定義名稱的 stylistic 函式作為值。

<html>
<head>  
<style>
   @font-face {
      font-family: "f1";
      src: url("font/SansationLight.woff");
   }

   @font-feature-values "f1" {
      @stylistic {
         s: 1;
      }
   }

   h1 {
      font-family: "f1";
      font-size: 3rem;
   }

   p {
      background-color: aqua;
   }

   .variant {
      font-variant-alternates: stylistic(s);
   }
</style>
</head>
<body>
   <p>Notice the character 'g' in both the headings</p>
   <h1>Heading without variant</h1>
   <h1 class="variant" >Heading with variant</h1>
</body>
</html>

列印頁面