스타일리스틱 세트

<div class="stage">
  <span class="word" id="w">Adobe agile</span>
  <div class="readout" id="readout">측정 중…</div>
</div>

.word{font:800 9vmin/1.2 -apple-system,system-ui,"Segoe UI",sans-serif;color:var(--fg);display:block;text-align:center}
.readout{margin-top:14px;font:11px ui-monospace,Menlo,monospace;color:var(--muted);text-align:center;max-width:280px}

const w = document.getElementById('w');
const readout = document.getElementById('readout');
const offWidth = (function(){ w.style.fontFeatureSettings = '"ss01" 0'; return w.getBoundingClientRect().width; })();
let on = false;
let measured = false;
function apply(){
  on = !on;
  w.style.fontFeatureSettings = on ? '"ss01" 1' : '"ss01" 0';
  if (!measured){
    measured = true;
    setTimeout(function(){
      const onWidth = w.getBoundingClientRect().width;
      readout.textContent = Math.abs(onWidth - offWidth) > 0.4
        ? '실측: ss01 켰을 때 폭이 달라짐 — 이 폰트에 스타일리스틱 세트가 정의돼 있음'
        : '실측: ss01 켜도 폭 동일 — 이 시스템 폰트엔 스타일리스틱 세트가 없어 보임';
    }, 50);
  }
}
apply();
setInterval(apply, 1600);