font-stretch

The font-stretch CSS property selects a normal, condensed, or expanded face from a font family.

It does not itself condense or expand. The font face must already exist as condensed or expanded within the font family.

Syntax

CSS

font-stretch: value;

JS

object.style.fontStretch = "value";

Initial

normal

<!doctype html>
<html>
<head>
    <style>
        @font-face
        {
            font-family: myfontfamily;
            src: url(/assets/ttf/Inconsolata.ttf);
        }
        p
        {
            font-family: myfontfamily;
        }
    </style>
</head>
<body>
    <button onmouseover="myfunction(innerHTML)">initial</button>
    <button onmouseover="myfunction(innerHTML)">ultra-condensed</button>
    <button onmouseover="myfunction(innerHTML)">extra-condensed</button>
    <button onmouseover="myfunction(innerHTML)">condensed</button>
    <button onmouseover="myfunction(innerHTML)">semi-condensed</button>
    <button onmouseover="myfunction(innerHTML)">normal</button>
    <button onmouseover="myfunction(innerHTML)">semi-expanded</button>
    <button onmouseover="myfunction(innerHTML)">expanded</button>
    <button onmouseover="myfunction(innerHTML)">extra-expanded</button>
    <button onmouseover="myfunction(innerHTML)">ultra-expanded</button>
    <button onmouseover="myfunction(value)" value="200%">percentage</button>
    <p>font-stretch</p>
    <script>
        function myfunction(myparameter)
        {
            document.querySelector("p").style.fontStretch = myparameter;
        }
    </script>
</body>
</html>

12 · JS · Internal

<!doctype html>
<html>
<head>
    <style>
        @font-face
        {
            font-family: myfontfamily;
            src: url(/assets/ttf/Inconsolata.ttf);
        }
        p
        {
            font-family: myfontfamily;
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button>ultra-condensed</button>
    <button>extra-condensed</button>
    <button>condensed</button>
    <button>semi-condensed</button>
    <button>normal</button>
    <button>semi-expanded</button>
    <button>expanded</button>
    <button>extra-expanded</button>
    <button>ultra-expanded</button>
    <button value="200%">percentage</button>
    <p>font-stretch</p>
    <script>
        function myfunction(myparameter)
        {
            document.querySelector("p").style.fontStretch = 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>

Syntax

CSS

JS

Values

Initial

Examples

1 · ultra-condensed

2 · extra-condensed

3 · condensed

4 · semi-condensed

5 · normal

6 · semi-expanded

7 · expanded

8 · extra-expanded

9 · ultra-expanded

10 · percentage

11 · JS · Inline

12 · JS · Internal

Links

Properties

External