폰트 기능 설정

<div class="stage">
  <div class="tagrow" id="tagrow"></div>
  <div class="readout" id="readout">측정 중…</div>
</div>

.stage{display:grid;gap:12px;justify-items:center;width:min(94%,480px)}
.tagrow{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.tag{font:11px ui-monospace,Menlo,monospace;padding:4px 8px;border-radius:6px;border:1px solid var(--line);color:var(--muted)}
.tag.on{border-color:var(--accent);color:var(--accent)}
.tag.off{border-color:var(--line);color:var(--muted);opacity:.5}
.readout{font:10px ui-monospace,Menlo,monospace;color:var(--muted);text-align:center}

const probe = document.createElement('span');
probe.style.cssText = 'position:absolute;visibility:hidden;white-space:nowrap;font:20px -apple-system,system-ui,sans-serif';
probe.textContent = '0 1/2 1st';
document.body.appendChild(probe);
function widthWith(setting){
  probe.style.fontFeatureSettings = setting;
  return probe.getBoundingClientRect().width;
}
const base = widthWith('normal');
const tests = [
  { tag: 'zero', setting: '"zero" 1' },
  { tag: 'frac', setting: '"frac" 1' },
  { tag: 'ordn', setting: '"ordn" 1' },
];
const tagrow = document.getElementById('tagrow');
const readout = document.getElementById('readout');
let onCount = 0;
tests.forEach(function(t){
  const w = widthWith(t.setting);
  const active = Math.abs(w - base) > 0.4;
  if (active) onCount++;
  const el = document.createElement('span');
  el.className = 'tag ' + (active ? 'on' : 'off');
  el.textContent = '"' + t.tag + '" 1' + (active ? ' ✓' : ' —');
  tagrow.appendChild(el);
});
readout.textContent = onCount + '/' + tests.length + '개 태그에서 폭 변화 실측됨 (0=off 기준 비교, 폰트마다 다름)';