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

列印頁面