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 ?。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。