@digital-blueprint/lunchlottery-app
Version:
[GitHub Repository](https://github.com/digital-blueprint/lunchlottery-app) | [npmjs package](https://www.npmjs.com/package/@digital-blueprint/lunchlottery-app) | [Unpkg CDN](https://unpkg.com/browse/@digital-blueprint/lunchlottery-app/)
61 lines (55 loc) • 2.01 kB
HTML
<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>