CSS - 字型函式

font-variant-alternates

CSS 屬性font-variant-alternates管理備用字形的用法，這些字形可以透過@font-feature-values中定義的名稱來引用。

此屬性可用於將字型的易於理解的名稱與控制某些 OpenType 字型功能的數字索引關聯。
對於選擇備用字形的功能（例如stylistic、styleset、character variant、swash、ornament或annotation），font-variant-alternates可以使用連結的名稱應用關聯的功能。
這種方法允許 CSS 規則啟用備用字形，而無需瞭解字型使用的特定索引值。

此屬性有兩種可能的格式。

可以使用關鍵字normal指定。

或者，可以使用一個或多個列出的關鍵字和函式來定義，這些關鍵字和函式用空格分隔，並且可以按任何順序排列。

可能的值

normal - 此關鍵字停用備用字形。
historical-forms - 此關鍵字啟用歷史形式，這些形式表示過去廣泛使用但現在不再常用的字形。它對應於 OpenType 值hist。
stylistic() - 此函式使用與數字關聯的字型特定名稱啟用某些字元的風格替換字形。它對應於 OpenType 值salt和salt2。
stylesheet() - 此函式啟用字元組的風格替換字形。引數是與數字關聯的字型特定名稱，例如ss02，對應於 OpenType 值ssXY。
character-variant() - 此函式允許單個字元具有不同的風格變化，這與styleset()不同，後者為字元集建立一致的字形。引數是與數字關聯的字型特定名稱（例如cv02），對應於 OpenType 值cvXY。
swash() - 此函式啟用帶有與數字關聯的字型特定名稱的襯線字形，例如swsh 2和cswh 2，對應於 OpenType 值swsh和cswh。
ornaments() - 此函式啟用裝飾，例如花飾和裝飾字形，使用與數字關聯的字型特定名稱，例如ornm 2，對應於 OpenType 值ornm。
annotation() - 此函式允許註釋，例如帶圓圈的數字或反向字元，使用與數字關聯的字型特定名稱，例如nalt 2，對應於 OpenType 值nalt。

語法

font-variant-alternates: normal | stylistic(<feature>) || historical-forms || styleset(<feature>) || character-variant(<feature>) || swash(<feature>) || ornaments(<feature>) || annotation(<feature>);

應用於

所有 HTML 元素。它也適用於::first-letter和::first-line。

CSS 字型函式 - 襯線字形

以下示例演示如何啟用襯線字形

<html>
<head>
<style>
   @font-face {
      font-family: 'Playfair Display';
      src: url('PlayfairDisplay-Regular.ttf');
   }
   @font-face {
      font-family: 'Lobster';
      src: url('Lobster-Regular.ttf');
   }
   @font-face {
      font-family: 'Great Vibes';
      src: url('GreatVibes-Regular.ttf');
   }
   .swash {
      font-size: 3rem;
      margin: 1rem;
      display: inline-block;
      font-family: 'Playfair Display', serif;
   }
   .swash.lobster {
      font-family: 'Lobster', cursive;
   }
   .swash.great-vibes {
      font-family: 'Great Vibes', cursive;
   }
</style>
</head>
<body>
   <h1>Swash Enabling Glyphs</h1>
   <div class="swash">A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</div>
   <div class="swash lobster">A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</div>
   <div class="swash great-vibes">A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</div>
</body>
</html>

CSS 字型函式 - 襯線字形

以下示例演示如何啟用襯線字形

<html>
<head>
<style>
   @font-face {
      font-family: 'Lobster';
      src: url('Lobster-Regular.ttf');
      font-weight: normal;
      font-style: normal;
   }
   @font-face {
      font-family: 'Kaushan Script';
      src: url('KaushanScript-Regular.ttf');
      font-weight: normal;
      font-style: normal;
   }
   .swash {
      font-family: 'Lobster', cursive;
      font-size: 50px;
      color: #FF5733;
   }
   .normal {
      font-family: 'Kaushan Script', cursive;
      font-size: 50px;
      color: #FFC300;
   }
</style>
</head>
<body>
   <h1>Swash Glyphs</h1>
   <p class="swash">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
   <p class="normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>

列印頁面