Select Git revision

Reiter, Christoph authored
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>