CSS 属性

CSS 中的 font-variant-ligatures 属性用于控制文本中连字的使用。连字是某些字体中使用的艺术字母组合，用于提高易读性和美观性。此属性允许您启用或禁用文本中特定类型的连字。

属性值

  • normal:默认值，允许连字按照字体定义使用。

  • none:禁用所有连字和上下文形式。

  • <common-lig- value>:启用常用的连字，例如 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。

    • 上下文:激活上述连字。关键字正常也会激活这些连字。

    • 无上下文:停用上述连字。

适用范围

所有 HTML 元素。

DOM 语法

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

    CSS font-variant-ligatures: 基本示例

    这是一个示例:

    <html>
<head>
   <link rel="stylesheet" href="https://fonts.cdnfonts.com/css/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> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80

    注意:将 font-family 更改为其他值并观察变化。