CSS font-feature-settings屬性用法及代碼示例

如果您想控製開放式字體中的高級排版函數，那麽 font-feature-settings 屬性對開發人員非常有用。

通過使用此屬性，我們可以控製高級排版設置，如花體、小寫字母和連字。為了激活它們，您必須在引號中聲明值，如果要啟用，則後跟 1 或 on。如果要禁用它，則可以使用 0 或 off。

用法:

font-feature-settings:values;

屬性值：此屬性接受如下所述的屬性值。

values:此屬性是指由 OpenType 函數標簽定義的值，如 “smcp”、“smcp” on、“swsh” on 等。它具有以下全局值：“inherit”、“initial” 和 “unset”。

注意：font-feature-settings 的默認值是正常的。

範例1：下麵的示例說明了使用值 “hlig” 來使用 font-feature-settings 屬性。

HTML


<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      p {
        color:green;
        padding:7px;
        font-weight:bold;
        font-feature-settings:"hlig" 4;
      }
    </style>
  </head>
  
  <body>
    <p>GeeksforGeeks!</p>
  </body>
</html>

輸出：

hlig 的字體特征

範例2：下麵的示例說明了使用值 “smcp” 和 “swsh” 來使用 font-feature-settings 屬性。

HTML


<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      p {
        color:green;
        padding:8px;
        font-weight:bold;
        font-style:italic;
        font-feature-settings:"smcp", "swsh" 5;
      }
    </style>
  </head>
  
  <body>
    <p>It is a Computer Sceince portal</p>
  </body>
</html>

輸出：

相關用法

注：本文由純淨天空篩選整理自cyber_psych0大神的英文原創作品 How to use font-feature-settings property in CSS ?。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。