CSS - font-feature-settings Property

The font-feature-settings property is provided by CSS to control advanced typographic features in OpenType fonts, such as swashes, small caps and ligatures.

Possible Values

  • normal: Default value. Default font settings are laid out.

  • <feature-tag-value>: Specified as a tuple, separated by space, having a tag name and an optional value.

    • Tag name is always a <string> of four ASCII characters, else it is invalid.

    • Optional value can be an integer or keyword on(1) or off(0). Default is 0.

Applies to

All the HTML elements.

DOM Syntax

object.style.fontFeatureSettings = "smcp" on;

CSS font-feature-setting - Basic Example

Here is an example:

<html>
<head>
<style>
    div{
        border: 1px solid red;
        margin: 5px;
        width: 300px;
    }
    p.allcaps{
        padding: 8px; font-weight: bold; font-style: italic; font-feature-settings: 'c2sc', 'smcp';
    }
    p.small-caps{
        padding: 8px; font-weight: bold; font-variant:small-caps; font-feature-settings: 'smcp', off;
    }
</style>
</head>
<body>
    <h2>Font feature settings</h2>
    <div>
        <p class="allcaps">
            Font feature settings-all caps
        </p>
        <p class="small-caps">
            Font feature settings-small caps
        </p>
    </div>
</body>
</html>
Advertisements