CSS - font-feature-settings 属性

CSS font-feature-settings 属性控制 OpenType 字体中的高级排版功能，例如花体字、小型大写字母和连字等。

语法

font-feature-settings: normal | feature-tag-value | initial | inherit;

属性值

值	描述
normal	使用默认字体设置。默认值。
feature-tag-value	一个空格分隔的元组，包含一个标签名称和一个可选值。标签名称始终是四个 ASCII 字符的 <字符串>，否则无效。可选值可以是整数或关键字 on(1) 或 off(0)。默认值为 0。
initial	将属性设置为其初始值。
inherit	从父元素继承属性。

CSS 字体功能设置属性示例

以下示例使用不同的值解释了 font-feature-setting 属性。

使用 Normal 值的字体功能设置属性

为了不启用任何特殊功能，使浏览器使用字体的默认设置而不应用任何额外的排版增强功能，我们使用 normal 值。这是默认值。以下示例中显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            font-feature-settings: "normal";
        }
    </style>
</head>

<body>
    <h2>
        CSS font-feature-setting property
    </h2>
    <h4>
        font-synthesis-weight: normal
    </h4>
    <p>
        Fact: India is home to 1.4 billion people,
        with 22 officially recognized languages 
        and 7 UNESCO World Heritage Sites.
    </p>
</body>

</html>

使用功能标签的字体功能设置属性

要启用或禁用字体中的特定排版功能，我们指定一个空格分隔的元组，其中包含一个四个字符的功能标签和一个值（例如，“liga” 1；启用标准连字，“kern” 0；禁用字距调整）。以下示例中使用了一些标签。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        p {
            font-size: 22px;
        }

        .fact-1 {
            font-feature-settings: "frac" 1;
        }

        .fact-2 {
            font-feature-settings: "c2sc" 1;
        }

        .fact-3 {
            font-feature-settings: "smcp" 1;
        }
    </style>
</head>

<body>
    <h2>
        CSS font-feature-setting property
    </h2>
    <h4>
        font-synthesis-weight: "frac"
    </h4>
    <p class="fact-1">
        India is home to 1.4 billion people,
        with 22 officially recognized languages
        and 7 UNESCO World Heritage Sites.
    </p>
    <h4>
        font-synthesis-weight: "c2sc"
    </h4>
    <p class="fact-2">
        India has 28 states and 8 Union Territories,
        and is the world's largest democracy by population.
    </p>
    <h4>
        font-synthesis-weight: "smcp"
    </h4>
    <p class="fact-3">
        The Taj Mahal, a UNESCO World Heritage Site,
        was completed in 1653 and is renowned for
        its white marble architecture.
    </p>
</body>

</html>

支持的浏览器

属性
font-feature-setting	48.0	10.0	34.0	9.1	35.0

css_properties_reference.htm

打印页面