font-variation-settings

The font-variation-settings CSS property provides low-level control over OpenType or TrueType font variations.

Syntax

CSS

font-variation-settings: value;

JS

object.style.fontVariationSettings = "value";

Values

<'font-variation-settings'> = normal | [ <string> <number>]#

normal

None of the features are enabled.

<string>

A case-sensitive OpenType or TrueType variation axis name.

<number>

An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.

Initial

normal

Examples

1 · normal

2 · string number · ital

3 · string number · opsz

4 · string number · slnt

5 · string number · wdth

6 · string number · wght

7 · JS · Inline

<!doctype html>
<html>
<head>
    <style>
        @font-face
        {
            font-family: myfontfamily;
            src: url(/assets/ttf/Inconsolata.ttf);
        }
        p
        {
            font-family: myfontfamily;
            font-size: 72px;
        }
    </style>
</head>
<body>
    <button onmouseover="myfunction(innerHTML)">initial</button>
    <button onmouseover="myfunction(innerHTML)">normal</button>
    <button onmouseover="myfunction(value)" value="'ital' 12">ital</button>
    <button onmouseover="myfunction(value)" value="'opsz' 12">opsz</button>
    <button onmouseover="myfunction(value)" value="'slnt' 12">slnt</button>
    <button onmouseover="myfunction(value)" value="'wdth' 900">wdth</button>
    <button onmouseover="myfunction(value)" value="'wght' 900">wght</button>
    <p>font-variation-settings</p>
    <script>
        function myfunction(myparameter)
        {
            document.querySelector("p").style.fontVariationSettings = myparameter;
        }
    </script>
</body>
</html>

8 · JS · Internal

<!doctype html>
<html>
<head>
    <style>
        @font-face
        {
            font-family: myfontfamily;
            src: url(/assets/ttf/Inconsolata.ttf);
        }
        p
        {
            font-family: myfontfamily;
            font-size: 72px;
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button>normal</button>
    <button value="'ital' 12">ital</button>
    <button value="'opsz' 12">opsz</button>
    <button value="'slnt' 12">slnt</button>
    <button value="'wdth' 900">wdth</button>
    <button value="'wght' 900">wght</button>
    <p>font-variation-settings</p>
    <script>
        function myfunction(myparameter)
        {
            document.querySelector("p").style.fontVariationSettings = myparameter;
        }
        const myelements = document.querySelectorAll("button");
        for(let myelement of myelements)
        {
            let myargument = myelement.innerHTML;
            if(myelement.value)
            {
                myargument = myelement.value;
            }
            myelement.addEventListener("mouseover", function(){myfunction(myargument)});
        }
    </script>
</body>
</html>