CSS - font-variant-ligatures 屬性

CSS 中的 font-variant-ligatures 屬性用於控制文字中連字的使用。連字是在某些字型中使用的藝術化字母組合，用於提高可讀性和美觀性。此屬性允許您啟用或停用文字中特定型別的連字。

可能的值

normal：預設值，允許使用字型定義的連字。
none：停用所有連字和上下文形式。
<common-lig-values>：啟用常用的連字，例如 fi, ffi, th 或類似的連字。對應於 OpenType 值 liga 和 clig。
- common-ligatures：啟用上述提到的連字。
- no-common-ligatures：停用上述提到的連字。
<discretionary-lig-values>：控制特定的連字。對應於 OpenType 值 dlig。
- discretionary-ligatures：啟用上述提到的連字。
- no-discretionary-ligatures：停用上述提到的連字。
<historical-lig-values>：控制歷史連字。對應於 OpenType 值 hlig。
- historical-ligatures：啟用上述提到的連字。
- no-historical-ligatures：停用上述提到的連字。
<contextual-alt-values>：啟用上下文連字，這些連字取決於周圍的字元。對應於 OpenType 值 calt。
- contextual：啟用上述提到的連字。關鍵字 normal 也啟用這些連字。
- no-contextual：停用上述提到的連字。

應用於

所有 HTML 元素。

DOM 語法

object.style.fontVariantLigatures = "normal | none | <common-lig-values>";

CSS font-variant-ligatures - 基本示例

這是一個示例

<html>
<head>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto Mono">
<style>
   p {
      font-family: "Roboto Mono", serif;
   }
   .normal {
      font-variant-ligatures: normal;
   }

   .none {
      font-variant-ligatures: none;
   }

   .com-lig {
      font-variant-ligatures: common-ligatures;
   }

   .no-com-lig {
      font-variant-ligatures: no-common-ligatures;
   }

   .disc-lig {
      font-variant-ligatures: discretionary-ligatures;
   }

   .no-disc-lig {
      font-variant-ligatures: no-discretionary-ligatures;
   }

   .hist-lig {
      font-variant-ligatures: historical-ligatures;
   }

   .no-hist-lig {
      font-variant-ligatures: no-historical-ligatures;
   }

   .context {
      font-variant-ligatures: contextual;
   }

   .no-context {
      font-variant-ligatures: no-contextual;
   }
</style>
</head>
<body>
   <p class="normal">
      normal - if fi ff tf ft jf fj
   </p>
   <p class="none">
      none - if fi ff tf ft jf fj
   </p>
   <p class="com-lig">
      common-ligatures - if fi ff tf ft jf fj
   </p>
   <p class="no-com-lig">
      no-common-ligatures - if fi ff tf ft jf fj
   </p>
   <p class="disc-lig">
      discretionary-ligatures - if fi ff tf ft jf fj
   </p>
   <p class="no-disc-lig">
      no-discretionary-ligatures - if fi ff tf ft jf fj
   </p>
   <p class="hist-lig">
      historical-ligatures - if fi ff tf ft jf fj
   </p>
   <p class="no-hist-lig">
      no-historical-ligatures - if fi ff tf ft jf fj
   </p>
   <p class="context">
      contextual - if fi ff tf ft jf fj
   </p>
   <p class="no-context">
      no-contextual - if fi ff tf ft jf fj
   </p>
</body>
</html>

注意：將 font-family 更改為其他值並觀察變化。

列印頁面