diff options
-rw-r--r-- | docs/inter-ui.css | 7 | ||||
-rw-r--r-- | docs/lab/index.html | 51 | ||||
-rw-r--r-- | docs/lab/lab.css | 8 | ||||
-rw-r--r-- | docs/lab/var.html | 151 | ||||
-rw-r--r-- | docs/res/base.css | 2 |
5 files changed, 120 insertions, 99 deletions
diff --git a/docs/inter-ui.css b/docs/inter-ui.css index 27227a6b4..76bfc9379 100644 --- a/docs/inter-ui.css +++ b/docs/inter-ui.css @@ -101,7 +101,9 @@ } /* -Single variable font. +------------------------------------------------------------------------------ +Alternative to the above: Single variable font. + Note that you may want to do something like this to make sure you're serving constant fonts to older browsers: @@ -117,7 +119,8 @@ html { */ @font-face { font-family: 'Inter UI var'; - font-weight: 400 900; /* safe weight range */ + font-weight: 400 900; + font-style: oblique 0deg 10deg; src: url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2-variations"), url("font-files/Inter-UI.var.woff2?v=3.0") format("woff2"); } diff --git a/docs/lab/index.html b/docs/lab/index.html index 7d0a37198..2f5862ebf 100644 --- a/docs/lab/index.html +++ b/docs/lab/index.html @@ -1037,6 +1037,7 @@ for (const ch of uniqueChars) { @font-face { font-family: 'Inter-UI-var-VERSION'; font-weight: 400 900; + font-style: oblique 0deg 10deg; src: url('fonts/var/Inter-UI.var.woff2') format("woff2-variations"); } @@ -1134,9 +1135,11 @@ for (const ch of uniqueChars) { } @font-face { + /* Note: Not hinted */ font-family: 'Inter-UI-var-hinted-VERSION'; font-weight: 400 900; - src: url('fonts/var-hinted/Inter-UI.var.woff2') format("woff2-variations"); + font-style: oblique 0deg 10deg; + src: url('fonts/var/Inter-UI.var.woff2') format("woff2-variations"); } /* ----------------------------------------------------------------------- */ @@ -1222,9 +1225,9 @@ document.head.appendChild(fontCSS) <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"> + <span>Slant:</span> + <input type="range" value="0" step="0.01" min="0" max="10" name="varSlant"> + <input type="number" value="0" step="1" min="0" max="10" name="varSlantNum"> </label> </div> @@ -1781,9 +1784,9 @@ function main() { }) let usingVarFont = false - var varWeightRange, varItalicRange + var varWeightRange, varSlantRange var varWeightSettingValueImpl = false - var varItalicSettingValueImpl = false + var varSlantSettingValueImpl = false let currentBodyWeightClass = null vars.bind('weight', (e, v) => { @@ -1796,32 +1799,32 @@ function main() { var italicVar = vars.bind('italic', (e, on) => { document.body.classList[on ? 'add' : 'remove']('italic') - if (usingVarFont && !varItalicSettingValueImpl) { - if (varItalicRange) { - varItalicRange.setValue(on ? 100 : 0) + if (usingVarFont && !varSlantSettingValueImpl) { + if (varSlantRange) { + varSlantRange.setValue(on ? 100 : 0) } updateVarFont() } }) let varState = { - weight: 400, - italic: 0, + weight: 400, // 400-900 + slant: 0, // 0-10 } function updateVarFont() { if (usingVarFont) { - varItalicSettingValueImpl = true - if (varState.italic <= 0.1) { - varState.italic = 0 + varSlantSettingValueImpl = true + if (varState.slant <= 0.1) { + varState.slant = 0 italicVar.setValue(false) } else { italicVar.setValue(true) } - varItalicSettingValueImpl = false + varSlantSettingValueImpl = false setCSSProp( "font-variation-settings", - `"wght" ${varState.weight}, "ital" ${varState.italic}` + `"wght" ${varState.weight}, "slnt" ${varState.slant}` ) } else { setCSSProp("font-variation-settings", null) @@ -1851,9 +1854,9 @@ function main() { } }) - let varItalicNum = vars.bind('varItalicNum', (e, v) => { - if (varItalicRange && !varItalicSettingValueImpl) { - varItalicRange.setValue(v) + let varSlantNum = vars.bind('varSlantNum', (e, v) => { + if (varSlantRange && !varSlantSettingValueImpl) { + varSlantRange.setValue(v) } }) @@ -1870,11 +1873,11 @@ function main() { return e.valueAsNumber !== undefined ? e.valueAsNumber : e.value }) - varItalicRange = vars.bind('varItalic', (e, v) => { - varState.italic = v - varItalicSettingValueImpl = true - varItalicNum.setValue(v) - varItalicSettingValueImpl = false + varSlantRange = vars.bind('varSlant', (e, v) => { + varState.slant = v + varSlantSettingValueImpl = true + varSlantNum.setValue(v) + varSlantSettingValueImpl = false updateVarFont() }, (e, prevValue, ev) => { if (prevValue === undefined) { diff --git a/docs/lab/lab.css b/docs/lab/lab.css index 719bc949c..7c799feec 100644 --- a/docs/lab/lab.css +++ b/docs/lab/lab.css @@ -154,17 +154,11 @@ samples, boxes { samples { display: flex; padding: 24px 0; - width:100%; + width: 100%; } body.italic samples { font-style: italic; } -body.varfont.italic samples { - /* [BUG] (Safari 11.1) font-style:italic and ital axis is not - mutually exclusive, meaning we have to set either or. */ - font-style: normal; - font-variation-settings: 'ital' 100; -} sample { margin: 0; /*white-space: pre;*/ diff --git a/docs/lab/var.html b/docs/lab/var.html index 0ed45c444..6f95b9a2c 100644 --- a/docs/lab/var.html +++ b/docs/lab/var.html @@ -8,6 +8,7 @@ @font-face { font-family: 'Inter UI var'; font-weight: 400 900; + font-style: oblique 0deg 10deg; src: url('fonts/var/Inter-UI.var.woff2') format("woff2-variations"), url('../font-files/Inter-UI.var.woff2') format("woff2-variations"); } @@ -24,9 +25,9 @@ body { .sample { padding: 40px 40px 40px 35px; - font-size: 96px; + font-size: var(--size); letter-spacing: -0.03em; - /*font-variation-settings: 'wght' 400, 'ital' 0;*/ + font-variation-settings: 'wght' var(--weight), 'slnt' var(--slant); } @supports (font-variation-settings: normal) { @@ -61,59 +62,63 @@ label { </head> <body> <div class="ctrl"> - <label> - Weight: - <input type="range" value="400" min="400" max="900" name="weight"> - </label> - <label> - Italic: - <input type="range" value="0" min="0" max="100" name="italic"> - </label> + <label>Weight: <input type="range" value="400" min="400" max="900" name="weight"></label> + <label>Slant: <input type="range" value="0" min="0" max="10" step="0.01" name="slant"></label> + <label>Size: <input type="range" value="96" min="6" max="400" name="size"></label> <label> <input type="checkbox" name="animate"> Animate </label> </div> <div class="sample" contenteditable> -Inter UI 2.6 coming soon <br> -Refined glyphs & kerning <br> -Variable weight axis <br> -Major overhaul 123ABC! <br> +Inter UI 3.0 is variable and flexible<br> +Variable weight axis<br> +Variable slant/oblique axis<br> +ABCDEFGHIJKLMNOPQRSTUVWXYZ<br> +abcdefghijklmnopqrstuvwxyz<br> +1234567890?!()[]{}&*^%$#@~<><br> </div> <script type="text/javascript"> -var state = { - weight: 400, - italic: 0, -} + var samples = document.querySelectorAll('div.sample') var weightInput = document.querySelector('[name="weight"]') -var italicInput = document.querySelector('[name="italic"]') - -weightInput.value = String(state.weight) -italicInput.value = String(state.italic) - -function updateFontVariationSettings() { - for (let i = 0; i < samples.length; i++) { - let sample = samples[i] - // sample.style.fontVariationSettings = - // `'wght' ${state.weight}, 'ital' ${state.italic}` - sample.style.fontVariationSettings = - `'wght' ${state.weight}, 'ital' ${state.italic}` - } -} +var slantInput = document.querySelector('[name="slant"]') +var sizeInput = document.querySelector('[name="size"]') -function setWeight(weight) { - state.weight = weight - updateFontVariationSettings() -} -function setItalic(italic) { - state.italic = italic - updateFontVariationSettings() +var ui = { + weight: parseFloat(weightInput.value), + slant: parseFloat(slantInput.value), + size: parseFloat(sizeInput.value), + + setState(props) { + for (let k in props) { + if (k in this) { + this[k] = props[k] + } + } + this.update() + }, + + update() { + let s = document.body.style + s.setProperty(`--weight`, this.weight) + s.setProperty(`--slant`, this.slant) + s.setProperty(`--size`, `${this.size}px`) + // for (let i = 0; i < samples.length; i++) { + // let sample = samples[i] + // // sample.style.fontVariationSettings = + // // `'wght' ${ui.weight}, 'ital' ${ui.slant}` + // sample.style.fontVariationSettings = + // `'wght' ${ui.weight}, 'slnt' ${ui.slant}` + // } + }, } +ui.update() + // monotime() :float milliseconds // var monotime = ( @@ -133,13 +138,13 @@ function startAnimation() { return } weightInput.disabled = true - italicInput.disabled = true + slantInput.disabled = true isAnimating = true let v = 0 let wmin = parseFloat(weightInput.min) , wmax = parseFloat(weightInput.max) - , imin = parseFloat(italicInput.min) - , imax = parseFloat(italicInput.max) + , imin = parseFloat(slantInput.min) + , imax = parseFloat(slantInput.max) , wspeed = 200 // lower is faster; time divisor , ispeed = 800 , clamp = 0.001 @@ -150,15 +155,17 @@ function startAnimation() { r = (1 + Math.sin((monotime() - startTime) / wspeed)) * 0.5 v = (wmin * (1 - clamp)) + (((wmax * (1 + clamp)) - (wmin * (1 - clamp))) * r) v = Math.max(wmin, Math.min(wmax, v)) - setWeight(v) + ui.weight = v weightInput.value = v r = (1 + Math.sin((monotime() - startTime) / ispeed)) * 0.5 v = (imin * (1 - clamp)) + (((imax * (1 + clamp)) - (imin * (1 - clamp))) * r) v = Math.max(imin, Math.min(imax, v)) - setItalic(v) - italicInput.value = v - + ui.slant = v + slantInput.value = v + + ui.update() + if (isAnimating) { requestAnimationFrame(update) } @@ -169,28 +176,42 @@ function startAnimation() { function stopAnimation() { isAnimating = false weightInput.disabled = false - italicInput.disabled = false - weightInput.value = String(state.weight) - italicInput.value = String(state.italic) + slantInput.disabled = false + weightInput.value = String(ui.weight) + slantInput.value = String(ui.slant) } -// UI control: weight slider -weightInput.addEventListener('input', - weightInput.valueAsNumber !== undefined ? ev => { - setWeight(weightInput.valueAsNumber) - } : ev => { - setWeight(parseFloat(weightInput.value)) - } -) +function bindRangeControl(rangeInput, handler) { + rangeInput.addEventListener('input', + rangeInput.valueAsNumber !== undefined ? ev => { + handler(rangeInput.valueAsNumber) + } : ev => { + handler(parseFloat(rangeInput.value)) + } + ) +} -// UI control: italic slider -italicInput.addEventListener('input', - italicInput.valueAsNumber !== undefined ? ev => { - setItalic(italicInput.valueAsNumber) - } : ev => { - setItalic(parseFloat(italicInput.value)) - } -) +// UI controls +bindRangeControl(weightInput, weight => ui.setState({ weight }) ) +bindRangeControl(slantInput, slant => ui.setState({ slant }) ) +bindRangeControl(sizeInput, size => ui.setState({ size }) ) + +// weightInput.addEventListener('input', +// weightInput.valueAsNumber !== undefined ? ev => { +// setWeight(weightInput.valueAsNumber) +// } : ev => { +// setWeight(parseFloat(weightInput.value)) +// } +// ) + +// UI control: slant slider +// slantInput.addEventListener('input', +// slantInput.valueAsNumber !== undefined ? ev => { +// setSlant(slantInput.valueAsNumber) +// } : ev => { +// setSlant(parseFloat(slantInput.value)) +// } +// ) // UI control: animate var animateInput = document.querySelector('[name="animate"]') diff --git a/docs/res/base.css b/docs/res/base.css index c0e677ae3..464d3db56 100644 --- a/docs/res/base.css +++ b/docs/res/base.css @@ -109,7 +109,7 @@ num { /* number */ em, i, .italic { font-style: italic; - font-variation-settings: 'ital' 100; + /*font-variation-settings: 'slnt' 10;*/ } small { |