CSS - @font-feature-values

CSS at-rule @font-feature-values 允許您為 OpenType 字型功能（例如連字、風格替換、裝飾或其他高階排版功能）定義自定義值。此規則提供了一種方法來控制文件特定元素中這些功能的使用。

@font-feature-values 規則由兩部分組成

選擇器：指定將應用字型功能的元素或元素。
字型功能宣告：為特定 OpenType 功能定義自定義值。

您可以在任何 CSS 條件組 at-rule 內部或 CSS 的頂層使用 @font-feature-values at-rule。

可能的值

@swash − 定義一個與 font-variant-alternates 的 swash() 函式一起使用的功能名稱。它僅允許一個值。例如：ident1: 2 有效，而 ident1: 2 4 無效。
@annotation − 定義一個與 font-variant-alternates 的 annotation() 函式一起使用的功能名稱。它僅允許一個值。例如：ident1: 2 有效，而 ident1: 2 4 無效。
@ornaments − font-variant-alternates 中功能名稱的 ornaments() 函式表示法僅允許單個值，例如 ident1: 2 有效，而 ident2: 2 4 無效。
@stylistic − font-variant-alternates 中功能名稱的 stylistic() 函式表示法只能具有單個值，例如 ident1: 2 有效，而 ident2: 2 4 無效。
@styleset − font-variant-alternates 中功能名稱的 stylistic() 函式表示法允許無限數量的值，例如 ident1: 2 4 12 1 對映到 OpenType 值 ss02、ss04、ss12 和 ss01。大於 99 的值有效，但不對應於任何 OpenType 值，並且會被忽略。
@character-variant − font-variant-alternates 中功能名稱的 character-variant() 函式表示法允許一個或兩個值，例如 ident1: 3 對映到 cv03=1，而 ident2: 2 4 對映到 cv02=4，但 ident2: 2 4 5 無效。

語法

@font-feature-values = 
   @font-feature-values <family-name># { <declaration-rule-list> }

CSS @font-feature-values - @swash

以下示例演示了 @swash 規則的使用，該規則將字元 'fancy' 的 swash 功能設定為 2。font-variant-alternates: swash(fancy) 屬性用於將 swash 功能 fancy 應用於文字 -

<html>
<head>
<style>
   @font-face {
      font-family: CustomFont;
      src: url("font/Brygada1918-Italic.ttf");
   }
   @font-feature-values "CustomFont" {
      @swash {
         fancy: 2;
      }
   }
   .p1 {
      font-family: "CustomFont";
   }
   .swash-text {
      font-variant-alternates: swash(fancy);
   }
</style>
</head>
<body>  
   <p>'fancy' swash styling.</p>
   <p class="swash-text p1">'fancy' swash styling.</p>
</body>
</html>

CSS @font-feature-values - @annotation

以下示例演示了 @font-feature-values 的使用，透過將 's' 分配給 4 的值來定義註釋樣式。然後使用 font-variant-alternates: annotation(s) 屬性將註釋功能 's' 應用於文字 -

<html>
<head>
<style>
   @font-face {
      font-family: CustomFont;
      src: url("font/Brygada1918-Italic.ttf");
   }
   @font-feature-values "CustomFont" {
      @annotation {
         s: 4;
      }
   }
   .p1 {
      font-family: "CustomFont";
   }
   .annotation-text {
      font-variant-alternates: annotation(s);
   }
</style>
</head>
<body>
   <p class="annotation-text p1">'s' annotation styling.</p>
   <p>'s' annotation styling.</p>
</body>
</html>

CSS @font-feature-values - @ornaments

以下示例演示了 @font-feature-values 的使用，透過將 'test' 分配給 12 的值來定義裝飾樣式。然後使用 font-variant-alternates: ornaments(test) 屬性將裝飾功能 'test' 應用於文字 -

<html>
<head>
<style>
   @font-face {
      font-family: CustomFont;
      src: url("font/SansationLight.woff");
   }
   @font-feature-values "CustomFont" {
      @ornaments {
         test: 12;
      }
   }
   p {
      font-family: "CustomFont";
   }
   .ornaments-text {
      font-variant-alternates: ornaments(test);
   }
</style>
</head>
<body>
   <p class="ornaments-text">'test' ornaments styling.</p>
   <p>'test' ornaments styling.</p>
</body>
</html>

CSS @font-feature-values - @stylistic

以下示例演示了 @font-feature-values 的使用，透過將 'data' 分配給 2 的值來定義風格樣式。然後使用 font-variant-alternates: stylistic(data) 屬性將風格功能 'data' 應用於文字 -

<html>
<head>
<style>
   @font-face {
      font-family: CustomFont;
      src: url("font/Brygada1918-Italic.ttf");
   }
   @font-feature-values "CustomFont" {
      @stylistic {
         data: 2;
      }
   }
   p {
      font-family: "CustomFont";
   }
   .ornaments-text {
      font-variant-alternates: stylistic(data);
   }
</style>
</head>
<body>
  <p class="ornaments-text">'data' stylistic styling.</p>
  <p>'data' stylistic styling.</p>
</body>
</html>

CSS @font-feature-values - @styleset

以下示例演示了 @font-feature-values 用於定義一個名為 "fancy" 的樣式集功能，其 OpenType 值為 2、4、12 和 1。font-variant-alternates 屬性與 styleset() 函式表示法一起使用以應用 "fancy" 樣式集 -

<html>
<head>
<style>
   @font-face {
      font-family: CustomFont;
      src: url("font/SansationLight.woff");
   }
   @font-feature-values "CustomFont" {
      @styleset {
         fancy: 2 4 12 1;
      }
   }
   p {
      font-family: "CustomFont";
   }
   .ornaments-text {
      font-variant-alternates: styleset(fancy);
   }
</style>
</head>
<body>
   <p class="ornaments-text">'fancy' styleset styling.</p>
   <p>'fancy' styleset styling.</p>
</body>
</html>

CSS @font-feature-values - @character-variant

以下示例演示了 @font-feature-values 的使用，透過定義一個名為 "test1" 的字元變體功能並將其值設定為 2 和 4。然後使用 font-variant-alternates 屬性與 styleset() 函式表示法一起應用 "test1" 字元變體 -

<html>
<head>
<style>
   @font-face {
      font-family: CustomFont;
      src: url("font/SansationLight.woff");
   }
   @font-feature-values "CustomFont" {
      @character-variant {
         test1: 2 4;
      }
   }
   p {
      font-family: "CustomFont";
   }
   .ornaments-text {
      font-variant-alternates: character-variant(test1);
   }
   </style>
</head>
<body>
   <p class="ornaments-text">'test1' character-variant styling.</p>
   <p>'test1' character-variant styling.</p>
</body>
</html>

列印頁面