Variable font axes

<!doctype html><html lang="ja"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><style>body{margin:0;min-height:330px}.sample{width:100%;height:100%;min-height:330px;padding:12px!important;display:flex!important;flex-direction:column;justify-content:center;align-items:center;gap:8px!important;background:#f0efeb;color:#232323;font-family:Arial,Meiryo,sans-serif;overflow:hidden;box-sizing:border-box}.sample *{box-sizing:border-box}.lab-scene{width:100%;max-width:430px;height:140px;position:relative;overflow:hidden;border-bottom:1px solid #ccc}.lab-scene:has(canvas){max-width:320px;height:auto;aspect-ratio:16/9;flex-shrink:0}.lab-canvas{display:block;width:100%;height:100%!important;outline-offset:-3px}.lab-canvas:focus-visible{outline:2px solid #222}.lab-controls{width:100%;max-width:390px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px}.lab-controls label{display:grid;grid-template-columns:1fr auto;gap:2px;font-size:11px;min-width:0}.lab-controls input{grid-column:1/-1;width:100%;min-width:0;margin:0;accent-color:#333;height:30px}.lab-controls output{font-variant-numeric:tabular-nums}.lab-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}.sample .lab-actions button{color:inherit;font:11px Arial,Meiryo,sans-serif;border:1px solid #aaa;border-radius:99px;background:transparent;min-height:44px;padding:8px 12px;cursor:pointer}.lab-status{font-size:10px;line-height:1.4;min-height:14px;margin:0;text-align:center}.lab-note{font-size:9px;line-height:1.3;color:#666;margin:0;text-align:center}.lab-actions button:focus-visible{outline:2px solid #222;outline-offset:2px}@media(prefers-reduced-motion:reduce){.sample *{animation-play-state:paused!important;transition:none!important}}.lab-scene{height:180px;padding:12px;display:grid;align-content:center;gap:8px}.lab-scene p{margin:0;font-size:12px;line-height:1.7}.lab-scene small{font-size:10px}.lab-scene button{min-height:40px}@font-face{font-family:AxisStudy;src:url('data:font/ttf;base64,AAEAAAAOAIAAAwBgSFZBUri8m40AAAtAAAAAmk9TLzJFAEU5AAABaAAAAGBTVEFUXU1WcwAAC9wAAAAsY21hcAFgAcIAAAHgAAAAamZ2YXJb0Vl/AAAMCAAAAExnbHlmm+gVKgAAAmQAAAb4Z3ZhckQbm4AAAAxUAAAZOGhlYWQvZOJQAAAA7AAAADZoaGVhBXACrgAAASQAAAAkaG10eAJ9AAAAAAHIAAAAGGxvY2EHgAlwAAACTAAAABhtYXhwAB8ATgAAAUgAAAAgbmFtZXdGvzgAAAlcAAABqnBvc3QA3QDnAAALCAAAADgAAQAAAAEAAJ1VDddfDzz1AAED6AAAAADnAU77AAAAAOcBTvsAMgBkAhwDFgAAAAMAAgAAAAAAAAABAAADhP+cAAACfQAAAJMB6gABAAAAAAAAAAAAAAAAAAAAAQABAAAACwBMABMAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAMCfQGQAAUABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAD8/Pz8AAAAgAFgDhP+cAAADhABkAAAAAAAAAAAAAAAAAAAAIAAAAn0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABABWAAAAEAAQAAMAAAAgAEEARQBJAFAAUwBY//8AAAAgAEEARQBJAE4AUgBY////4f/J/73/vgAA/7P/qwABAAAAAAAAAAAACAAAAAAAAAAJAAgABAAAAAAAAAAAAGkAuwEWAYQB3QI0ApgDDQN8ABIAMgBkAhwDFgADAAcACwAPABMAFwAbAB8AIwAnACsALwAzADcAOwA/AEMARwAAEzM1IxczNSMXMzUjFzM1IxczNSMFMzUjFTM1IxUzNSMXMzUjFzM1IxczNSMFMzUjFTM1IxUzNSMXMzUjFzM1IxczNSMXMzUjMlpaZFpaZFpaZFpaZFpa/nBaWlpaWlpkWlpkWlpkWlr+1FpaWlpaWmRaWmRaWmRaWmRaWgK8WlpaWlpaWlpavlq+Wr5aWlpaWlpavlq+Wr5aWlpaWlpaWloAAA0AMgBkAhwDFgADAAcACwAPABMAFwAbAB8AIwAnACsALwAzAAATMzUjBTM1IwUzNSMFMzUjBTM1IxczNSMHMzUjBzM1IxczNSMFMzUjBTM1IwUzNSMFMzUjMlpaAZBaWv5wWloBkFpa/tRaWshaWmRaWmRaWshaWv7UWloBkFpa/nBaWgGQWloCvFpaWr5aWlq+Wlpavlq+WlpavlpaWr5aWloADwAyAGQCHAMWAAMABwALAA8AEwAXABsAHwAjACcAKwAvADMANwA7AAATMzUjFzM1IxczNSMXMzUjBTM1IwUzNSMFMzUjBTM1IwUzNSMXMzUjFzM1IxczNSMFMzUjFTM1IxUzNSMyWlpkWlpkWlpkWlr+1FpaAZBaWv5wWloBkFpa/nBaWmRaWmRaWmRaWv7UWlpaWlpaArxaWlpaWlpavlpaWr5aWlq+WlpaWlpaWr5avlq+WgASADIAZAIcAxYAAwAHAAsADwATABcAGwAfACMAJwArAC8AMwA3ADsAPwBDAEcAABMzNSMXMzUjFzM1IxczNSMFMzUjBTM1IwUzNSMFMzUjBTM1IxczNSMXMzUjFzM1IwUzNSMXMzUjBzM1IwUzNSMFMzUjBTM1IzJaWmRaWmRaWmRaWv7UWloBkFpa/nBaWgGQWlr+cFpaZFpaZFpaZFpa/tRaWshaWshaWgEsWlr+1FpaAZBaWgK8WlpaWlpaWr5aWlq+WlpavlpaWlpaWlq+WlpavlpaWr5aWloADwAyAGQCHAMWAAMABwALAA8AEwAXABsAHwAjACcAKwAvADMANwA7AAATMzUjFzM1IxczNSMXMzUjBTM1IxUzNSMXMzUjFzM1IxczNSMXMzUjFTM1IwUzNSMXMzUjFzM1IxczNSOWWlpkWlpkWlpkWlr+cFpaWlpkWlpkWlpkWlpkWlpaWv5wWlpkWlpkWlpkWloCvFpaWlpaWlq+Wr5avlpaWlpavlq+Wr5aWlpaWlpaAA8AMgBkAhwDFgADAAcACwAPABMAFwAbAB8AIwAnACsALwAzADcAOwAAEzM1IxczNSMXMzUjFzM1IxczNSMHMzUjFTM1IxUzNSMVMzUjFTM1IwczNSMXMzUjFzM1IxczNSMXMzUjMlpaZFpaZFpaZFpaZFpayFpaWlpaWlpaWlrIWlpkWlpkWlpkWlpkWloCvFpaWlpaWlpaWr5avlq+Wr5avlq+WlpaWlpaWlpaABAAMgBkAhwDFgADAAcACwAPABMAFwAbAB8AIwAnACsALwAzADcAOwA/AAATMzUjFzM1IxczNSMFMzUj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') format('truetype');font-weight:400;font-stretch:75% 125%;font-style:oblique 0deg 12deg}.axis-word{font-family:AxisStudy,monospace;font-size:clamp(18px,5vw,34px);font-optical-sizing:none;line-height:2;white-space:nowrap}</style><div class="sample"><div class="lab-scene"><div class="axis-word">EXPRESSION</div><small>WIDTH / SLANT / OPTICAL SIZE</small></div><div class="lab-controls"><label>幅 wdth<output>100</output><input aria-label="幅 wdth" type="range" min="75" max="125" step="1" value="100" data-key="width"></label><label>傾斜 slnt<output>0</output><input aria-label="傾斜 slnt" type="range" min="-12" max="0" step="1" value="0" data-key="slant"></label><label>光学サイズ opsz<output>10</output><input aria-label="光学サイズ opsz" type="range" min="10" max="72" step="1" value="10" data-key="optical"></label></div><div class="lab-actions"><button data-play>停止</button><button data-reset>比較を切り替える</button></div><p class="lab-status" role="status"></p></div><script>const lab=(function runDomLab(root,cfg,setup){
 const abort=new AbortController(),values=Object.fromEntries(cfg.controls.map(c=>[c.key,c.value])),mq=matchMedia('(prefers-reduced-motion:reduce)');let auto=!mq.matches;
 const on=(el,event,fn)=>el.addEventListener(event,fn,{signal:abort.signal});
 const api=setup({root,values,kind:cfg.kind,on,reduced:mq.matches})||{};
 for(const input of root.querySelectorAll('[data-key]'))on(input,'input',()=>{values[input.dataset.key]=Number(input.value);input.closest('label').querySelector('output').textContent=input.value;api.update?.()});
 const play=root.querySelector('[data-play]');on(play,'click',()=>{auto=!auto;api.setAuto?.(auto);for(const a of root.querySelector('.lab-scene').getAnimations({subtree:true}))auto?a.play():a.pause();play.textContent=auto?'停止':'再生';play.setAttribute('aria-pressed',String(!auto))});
 const reset=root.querySelector('[data-reset]');on(reset,'click',()=>api.action?.());
 on(document,'visibilitychange',()=>api.setAuto?.(auto&&!document.hidden));
 api.update?.();if(cfg.static)play.hidden=true;
 return {setAuto(on){auto=on&&!mq.matches;api.setAuto?.(auto);for(const a of root.querySelector('.lab-scene').getAnimations({subtree:true}))auto?a.play():a.pause();play.textContent=auto?'停止':'再生'},destroy(){abort.abort();api.destroy?.()}};
})(document,{"kind":"type-variable-axes","controls":[{"key":"width","label":"幅 wdth","min":75,"max":125,"value":100,"step":1},{"key":"slant","label":"傾斜 slnt","min":-12,"max":0,"value":0,"step":1},{"key":"optical","label":"光学サイズ opsz","min":10,"max":72,"value":10,"step":1}],"static":true,"action":"比較を切り替える"},function setup({root,values:v,kind,on}){const stage=root.querySelector('.lab-scene'),status=root.querySelector('.lab-status');let alt=false;return{update(){for(const [key,value]of Object.entries(v))stage.style.setProperty('--'+key,value);if(kind==='type-variable-axes'){root.querySelector('.axis-word').style.fontVariationSettings=`"wdth" ${v.width}, "slnt" ${v.slant}, "opsz" ${v.optical}`;status.textContent='図鑑オリジナルの実フォント · wdth / slnt / opsz'}if(kind==='color-palette'){root.querySelectorAll('.swatch').forEach((el,i)=>{const h=(v.hue+i*v.interval)%360;el.style.background=`hsl(${h} 40% ${i%2?65:38}%)`;el.textContent=Math.round(h)+'°'})}if(kind==='color-contrast'){const lum=x=>{x/=255;return x<=.04045?x/12.92:Math.pow((x+.055)/1.055,2.4)},a=lum(v.foreground),b=lum(v.background),ratio=(Math.max(a,b)+.05)/(Math.min(a,b)+.05);stage.style.background=`rgb(${v.background},${v.background},${v.background})`;stage.style.color=`rgb(${v.foreground},${v.foreground},${v.foreground})`;status.textContent=`コントラスト比 ${ratio.toFixed(2)}:1 · 通常文字のAA目安 ${ratio>=4.5?'達成':'未達'}`}if(kind==='type-line-break'||kind==='type-kinsoku')root.querySelector('.text-frame').style.width=v.width+'%';if(kind==='svg-icon-morph'){const p=v.progress/100,lines=root.querySelectorAll('line');lines[0].setAttribute('x1',35+10*p);lines[0].setAttribute('y1',35+10*p);lines[0].setAttribute('x2',85-10*p);lines[0].setAttribute('y2',35+40*p);lines[1].setAttribute('opacity',1-p);lines[2].setAttribute('x1',35+10*p);lines[2].setAttribute('y1',85-10*p);lines[2].setAttribute('x2',85-10*p);lines[2].setAttribute('y2',85-40*p);}},action(){alt=!alt;stage.classList.toggle('alternate',alt);status.textContent=alt?'比較する状態':'元の状態'}}});addEventListener('pagehide',()=>lab.destroy(),{once:true});</script></html>