diff options
author | Rasmus Andersson <rasmus@notion.se> | 2018-09-10 20:21:55 +0300 |
---|---|---|
committer | Rasmus Andersson <rasmus@notion.se> | 2018-10-11 09:37:35 +0300 |
commit | 045c98c1c7441fb0f2c4e6dfe866fe5e3f78defe (patch) | |
tree | fbb9310e5863473a29aa0c2576a66f382ed8a31b /docs/lab/index.html | |
parent | 69d824fc5bf9ba28f664f6d20fe0da91b82bd1a5 (diff) | |
download | inter-045c98c1c7441fb0f2c4e6dfe866fe5e3f78defe.tar.xz |
website
Diffstat (limited to 'docs/lab/index.html')
-rw-r--r-- | docs/lab/index.html | 173 |
1 files changed, 151 insertions, 22 deletions
diff --git a/docs/lab/index.html b/docs/lab/index.html index 8c1295516..9deb630d3 100644 --- a/docs/lab/index.html +++ b/docs/lab/index.html @@ -753,78 +753,95 @@ for (const ch of uniqueChars) { font-family: 'Inter-UI-VERSION'; font-style: normal; font-weight: 400; - src: url("fonts/Inter-UI-Regular.woff2") format("woff2"), - url("fonts/Inter-UI-Regular.woff") format("woff"); + src: url("fonts/const/Inter-UI-Regular.woff2") format("woff2"), + url("fonts/const/Inter-UI-Regular.woff") format("woff"); } @font-face { font-family: 'Inter-UI-VERSION'; font-style: italic; font-weight: 400; - src: url("fonts/Inter-UI-Italic.woff2") format("woff2"), - url("fonts/Inter-UI-Italic.woff") format("woff"); + src: url("fonts/const/Inter-UI-Italic.woff2") format("woff2"), + url("fonts/const/Inter-UI-Italic.woff") format("woff"); } @font-face { font-family: 'Inter-UI-VERSION'; font-style: normal; font-weight: 500; - src: url("fonts/Inter-UI-Medium.woff2") format("woff2"), - url("fonts/Inter-UI-Medium.woff") format("woff"); + src: url("fonts/const/Inter-UI-Medium.woff2") format("woff2"), + url("fonts/const/Inter-UI-Medium.woff") format("woff"); } @font-face { font-family: 'Inter-UI-VERSION'; font-style: italic; font-weight: 500; - src: url("fonts/Inter-UI-MediumItalic.woff2") format("woff2"), - url("fonts/Inter-UI-MediumItalic.woff") format("woff"); + src: url("fonts/const/Inter-UI-MediumItalic.woff2") format("woff2"), + url("fonts/const/Inter-UI-MediumItalic.woff") format("woff"); } @font-face { font-family: 'Inter-UI-VERSION'; font-style: normal; font-weight: 700; - src: url("fonts/Inter-UI-Bold.woff2") format("woff2"), - url("fonts/Inter-UI-Bold.woff") format("woff"); + src: url("fonts/const/Inter-UI-Bold.woff2") format("woff2"), + url("fonts/const/Inter-UI-Bold.woff") format("woff"); } @font-face { font-family: 'Inter-UI-VERSION'; font-style: italic; font-weight: 700; - src: url("fonts/Inter-UI-BoldItalic.woff2") format("woff2"), - url("fonts/Inter-UI-BoldItalic.woff") format("woff"); + src: url("fonts/const/Inter-UI-BoldItalic.woff2") format("woff2"), + url("fonts/const/Inter-UI-BoldItalic.woff") format("woff"); } @font-face { font-family: 'Inter-UI-VERSION'; font-style: normal; font-weight: 900; - src: url("fonts/Inter-UI-Black.woff2") format("woff2"), - url("fonts/Inter-UI-Black.woff") format("woff"); + src: url("fonts/const/Inter-UI-Black.woff2") format("woff2"), + url("fonts/const/Inter-UI-Black.woff") format("woff"); } @font-face { font-family: 'Inter-UI-VERSION'; font-style: italic; font-weight: 900; - src: url("fonts/Inter-UI-BlackItalic.woff2") format("woff2"), - url("fonts/Inter-UI-BlackItalic.woff") format("woff"); + src: url("fonts/const/Inter-UI-BlackItalic.woff2") format("woff2"), + url("fonts/const/Inter-UI-BlackItalic.woff") format("woff"); } -.inter-ui, .inter-ui input, .inter-ui select { +.inter-ui, +.inter-ui input, +.inter-ui select { font-family: 'Inter-UI-VERSION', 'Inter UI', serif !important; } +@font-face { + font-family: 'Inter-UI-var-VERSION'; + font-weight: 400 900; + src: url('fonts/var/Inter-UI.var.woff2') format("woff2-variations"); +} + +body.varfont .inter-ui, +body.varfont .inter-ui input, +body.varfont .inter-ui select { + font-family: 'Inter-UI-var-VERSION', 'Inter UI var', serif !important; +} + </style> <link href="lab.css" rel="stylesheet"> <script type="text/javascript"> const fontVersion = Math.round(Date.now()).toString(36) let fontFamilyName = 'Inter-UI-v' + fontVersion +let fontFamilyNameVar = 'Inter-UI-var-v' + fontVersion const fontCSSTemplate = document.querySelector('#font-css') const fontCSS = fontCSSTemplate.cloneNode(true) fontCSS.innerHTML = fontCSS.innerHTML + .replace(/Inter-UI-var-VERSION/g, fontFamilyNameVar) .replace(/Inter-UI-VERSION/g, fontFamilyName) .replace(/(\.woff2?)/g, '$1?r='+fontVersion) fontFamilyName += ", 'Inter UI'" +fontFamilyNameVar += ", 'Inter UI var'" fontCSS.setAttribute('id', '') fontCSS.setAttribute('type', 'text/css') document.head.appendChild(fontCSS) @@ -833,19 +850,47 @@ document.head.appendChild(fontCSS) </head> <body> <div class="options inter-ui"> - <select name="sample"></select> - <label> - <input type="number" value="13" step="1" min="4" max="1024" name="size"> - <select name="weight" style="max-width:120px"> + <label class="style"> + <select name="weight" style="max-width:100px"> <!--option value="200">Thin (200)</option> <option value="300">Light (300)</option--> <option value="400" selected>Regular (400)</option> <option value="500">Medium (500)</option> <option value="700">Bold (700)</option> + <option value="800">Extra Bold (800)</option> <option value="900">Black (900)</option> </select> <label style="display:inline-block; margin-left:4px"><input type="checkbox" name="italic"> <em>Italic</em></label> + <label> + <input type="checkbox" class="featopt" name="varfont" + title="Enable variable font (experimental!)"> + <span>Variable</span> + </label> + </label> + + <div class="checkbox-group varfontControl"> + <span>Variable axes:</span> + <label class="label-and-value"> + <span>Weight:</span> + <input type="range" value="400" min="400" max="900" name="varWeight"> + <input type="number" value="400" step="1" min="400" max="900" name="varWeightNum"> + </label> + <label class="label-and-value"> + <span>Italic:</span> + <input type="range" value="0" min="0" max="100" name="varItalic"> + <input type="number" value="0" step="1" min="0" max="100" name="varItalicNum"> + </label> + </div> + + <label class="label-and-value"> + <span>Size:</span> + <input type="number" value="13" step="1" min="4" max="1024" name="size"> + </label> + + <label class="label-and-value"> + <span>Sample text:</span> + <select name="sample"></select> </label> <div class="checkbox-group repertoireControl"> @@ -1336,6 +1381,11 @@ function main() { // setCSSProp('line-height', Math.ceil(v * 1.5) + 'px') }) + let usingVarFont = false + var varWeightRange, varItalicRange + var varWeightSettingValueImpl = false + var varItalicSettingValueImpl = false + let currentBodyWeightClass = null vars.bind('weight', (e, v) => { setCSSProp('font-weight', v) @@ -1345,8 +1395,87 @@ function main() { document.body.classList.add(currentBodyWeightClass = 'font-weight-'+v) }) - vars.bind('italic', (e, on) => { + var italicVar = vars.bind('italic', (e, on) => { document.body.classList[on ? 'add' : 'remove']('italic') + if (usingVarFont && !varItalicSettingValueImpl) { + if (varItalicRange) { + varItalicRange.setValue(on ? 100 : 0) + } + updateVarFont() + } + }) + + let varState = { + weight: 400, + italic: 0, + } + + function updateVarFont() { + if (usingVarFont) { + varItalicSettingValueImpl = true + if (varState.italic <= 0.1) { + varState.italic = 0 + italicVar.setValue(false) + } else { + italicVar.setValue(true) + } + varItalicSettingValueImpl = false + setCSSProp( + "font-variation-settings", + `"wght" ${varState.weight}, "ital" ${varState.italic}` + ) + } else { + setCSSProp("font-variation-settings", null) + } + } + + vars.bind('varfont', (e, on) => { + usingVarFont = on + document.body.classList[on ? 'add' : 'remove']('varfont') + document.body.style.fontFamily = on ? fontFamilyNameVar : fontFamilyName; + updateVarFont() + }) + + let varWeightNum = vars.bind('varWeightNum', (e, v) => { + if (varWeightRange && !varWeightSettingValueImpl) { + varWeightRange.setValue(v) + } + }) + + let varItalicNum = vars.bind('varItalicNum', (e, v) => { + if (varItalicRange && !varItalicSettingValueImpl) { + varItalicRange.setValue(v) + } + }) + + varWeightRange = vars.bind('varWeight', (e, v) => { + varState.weight = v + varWeightSettingValueImpl = true + varWeightNum.setValue(v) + varWeightSettingValueImpl = false + updateVarFont() + }, (e, prevValue, ev) => { + if (prevValue === undefined) { + return 400 + } + return e.valueAsNumber !== undefined ? e.valueAsNumber : e.value + }) + + varItalicRange = vars.bind('varItalic', (e, v) => { + varState.italic = v + varItalicSettingValueImpl = true + varItalicNum.setValue(v) + varItalicSettingValueImpl = false + updateVarFont() + }, (e, prevValue, ev) => { + if (prevValue === undefined) { + return 0 + } + return e.valueAsNumber !== undefined ? e.valueAsNumber : e.value + }) + + vars.bind('varItalic', (e, v) => { + console.log('varItalic', v) }) |