폰트 디스플레이 전략

<div class="stage">
  <div class="sample" id="sample">Loading Text</div>
  <div class="phase" id="phase">block · 0ms</div>
  <div class="note">시뮬레이션 — 실제 네트워크 요청 없음</div>
</div>

.stage{display:grid;justify-items:center;gap:10px}
.sample{font:800 8vmin/1.2 -apple-system,system-ui,sans-serif;color:var(--fg);transition:opacity .15s, font-style .15s}
.sample.hidden{opacity:0}
.sample.custom{font-style:italic;color:var(--accent)}
.phase{font:11px ui-monospace,Menlo,monospace;color:var(--accent-2)}
.note{font:10px ui-monospace,Menlo,monospace;color:var(--muted)}

const sample = document.getElementById('sample');
const phase = document.getElementById('phase');
const strategies = [
  { name: 'block', steps: [[0,'hidden'],[500,'hidden'],[900,'fallback-then-custom']] },
  { name: 'swap', steps: [[0,'fallback'],[700,'custom']] },
  { name: 'fallback', steps: [[0,'hidden'],[150,'fallback'],[900,'stays-fallback']] },
  { name: 'optional', steps: [[0,'hidden'],[100,'fallback-forever']] },
];
let s = 0;
function runStrategy(){
  const strat = strategies[s % strategies.length];
  strat.steps.forEach(function(step){
    setTimeout(function(){
      const [ms, state] = step;
      sample.classList.remove('hidden', 'custom');
      if (state === 'hidden') sample.classList.add('hidden');
      if (state === 'custom' || state === 'fallback-then-custom') sample.classList.add('custom');
      phase.textContent = 'font-display: ' + strat.name + ' · ' + ms + 'ms · ' + state;
    }, step[0]);
  });
  s++;
  setTimeout(runStrategy, 2600);
}
runStrategy();