Skip to content
Snippets Groups Projects
Select Git revision
  • 2af9794f88cd6d8403f2748463141101843c4169
  • main default protected
  • renovate/lock-file-maintenance
  • demo protected
  • person-select-custom
  • dbp-translation-component
  • icon-set-mapping
  • port-i18next-parser
  • remove-sentry
  • favorites-and-recent-files
  • revert-6c632dc6
  • lit2
  • advertisement
  • wc-part
  • automagic
  • publish
  • wip-cleanup
  • demo-file-handling
18 results

index.html

Blame
  • index.html 1.78 KiB
    <html>
        <head>
            <meta charset="UTF-8">
            <style>
                @import "files/static.css";
                @import "files/variable.css";
    
                .pro {
                    font-family: "Source Sans Pro";
                }
    
                .variable {
                    font-family: "Source Sans Variable";
                }
    
                p {
                    margin: 2em;
                }
            </style>
    
            <script type="module">
                for (let weight of ['inherit', 'lighter', 'bolder', '200', '300', '400', '600', '700', '900']) {
                    for (let style of ['normal', 'italic']) {
                        let par = document.createElement("p");
                        let text = document.createTextNode(`(${weight}, ${style})
                            The quick brown fox jumps over the lazy dog. THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.`);
                        par.setAttribute('style', `font-weight: ${weight};font-style: ${style}`);
                        par.appendChild(text);
                        document.body.appendChild(par);
                    }
                }
    
                function updateWeight() {
                    let value = document.getElementById('range').value;
                    document.body.setAttribute('style', 'font-weight: ' + value);
                    document.getElementById('weight').innerHTML = value;
                }
                window.updateWeight = updateWeight;
                updateWeight();
    
            </script>
        </head>
        <body class="pro">
            <button onclick="document.body.setAttribute('class', 'pro');">source-sans-pro</button>
            <button onclick="document.body.setAttribute('class', 'variable');">source-sans-variable</button>
            <input id="range" type="range" value="200" min="200" max="900" oninput="updateWeight();">
            <span id="weight"></span>
        </body>
    </html>