51 lines
2 KiB
HTML
51 lines
2 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>variable font weights</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:wght@200..800&family=Google+Sans+Flex:opsz,wght@6..144,1..1000&family=Inter:opsz,wght@14..32,100..900&family=JetBrains+Mono:wght@100..800&family=Montserrat:wght@100..900&family=Open+Sans:wght@300..800&family=Playfair+Display:wght@400..900&family=Source+Code+Pro:wght@200..900&display=swap" rel="stylesheet">
|
|
<style>
|
|
ul {
|
|
list-decoration: none;
|
|
}
|
|
li {
|
|
font-optical-sizing: auto;
|
|
font-size: 10rem;
|
|
text-align: center;
|
|
animation: vary 6.7s linear infinite alternate;
|
|
}
|
|
|
|
@keyframes vary {
|
|
from {
|
|
font-weight: var(--min);
|
|
}
|
|
|
|
to {
|
|
font-weight: var(--max);
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => document.querySelectorAll("li").forEach(li => {
|
|
const family = li.style.fontFamily.replaceAll('"', "");
|
|
const min = li.style.getPropertyValue("--min");
|
|
const max = li.style.getPropertyValue("--max");
|
|
li.title = `${family} (${min}-${max})`
|
|
}));
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<ul>
|
|
<li style="--min: 200; --max: 800; font-family: 'Atkinson Hyperlegible Next'">Variable</li>
|
|
<li style="--min: 1; --max: 1000; font-family: 'Google Sans Flex'">Variable</li>
|
|
<li style="--min: 300; --max: 800; font-family: 'Open Sans'">Variable</li>
|
|
<li style="--min: 100; --max: 900; font-family: 'Inter'">Variable</li>
|
|
<li style="--min: 100; --max: 900; font-family: 'Montserrat'">Variable</li>
|
|
<li style="--min: 400; --max: 900; font-family: 'Playfair Display'">Variable</li>
|
|
<li style="--min: 200; --max: 900; font-family: 'Source Code Pro'">Variable</li>
|
|
<li style="--min: 100; --max: 800; font-family: 'JetBrains Mono'">Variable</li>
|
|
</ul>
|
|
</body>
|
|
</html>
|