가변 폰트

<div class="stage">
  <span class="word" id="w">Variable</span>
  <div class="readout">wght <span id="wght">400</span> (font-weight 보간 근사)</div>
</div>

.word{font:14vmin/1.1 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--fg);display:block;text-align:center;font-variation-settings:"wght" 400}
.readout{margin-top:16px;font:12px ui-monospace,Menlo,monospace;color:var(--muted);text-align:center}
#wght{color:var(--accent);font-weight:700}

const w = document.getElementById('w');
const label = document.getElementById('wght');
const start = performance.now();
function loop(now){
  const t = (now - start) / 2400;
  const wght = Math.round(400 + Math.sin(t) * 300);
  w.style.fontWeight = wght;
  w.style.fontVariationSettings = '"wght" ' + wght;
  label.textContent = wght;
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);