diff options
Diffstat (limited to 'docs/var-test.html')
-rw-r--r-- | docs/var-test.html | 265 |
1 files changed, 265 insertions, 0 deletions
diff --git a/docs/var-test.html b/docs/var-test.html new file mode 100644 index 000000000..553d91b8a --- /dev/null +++ b/docs/var-test.html @@ -0,0 +1,265 @@ +<!DOCTYPE HTML> +<html lang="en"> +<head> +<meta charset="utf-8"> +<meta name="viewport" content="width=device-width, initial-scale=1"> +<style type="text/css"> + +@font-face { + font-family: 'Inter UI var'; + font-weight: 400 900; + font-style: oblique 0deg 20deg; + font-named-instance: 'Regular'; + src: url("font-files/Inter-UI.var.woff2") format("woff2 supports variations(gvar)"), + url("font-files/Inter-UI.var.woff2") format("woff2-variations"), + url("font-files/Inter-UI.var.woff2") format("woff2"); +} + +/* Alternate two-file setup used for italic where oblique degrees are not + supported (MS Edge) */ +@font-face { + font-family: 'Inter UI var-alt'; + font-weight: 400 900; + font-style: normal; + font-named-instance: 'Regular'; + src: url("font-files/Inter-UI-upright.var.woff2") format("woff2 supports variations(gvar)"), + url("font-files/Inter-UI-upright.var.woff2") format("woff2-variations"), + url("font-files/Inter-UI-upright.var.woff2") format("woff2"); +} +@font-face { + font-family: 'Inter UI var-alt'; + font-weight: 400 900; + font-style: italic; + font-named-instance: 'Italic'; + src: url("font-files/Inter-UI-italic.var.woff2") format("woff2 supports variations(gvar)"), + url("font-files/Inter-UI-italic.var.woff2") format("woff2-variations"), + url("font-files/Inter-UI-italic.var.woff2") format("woff2"); +} + +/* Fix for Safari where defining font-weight range casues regular style + to actually be italic. */ +@font-face { + font-family: 'Inter UI var safari-fix'; + font-style: oblique 0deg 10deg; + src: url("font-files/Inter-UI.var.woff2") format("woff2 supports variations(gvar)"), + url("font-files/Inter-UI.var.woff2") format("woff2-variations"), + url("font-files/Inter-UI.var.woff2") format("woff2"); +} + + +html { + font-family: 'Inter UI', sans-serif; + font-size: 20px; + font-synthesis: none; + /*font-style: oblique 0deg;*/ + letter-spacing: 0; + line-height: 1.3; +} + +body { + margin: 0; + padding: 0; +} + +@supports (font-variation-settings: normal) { + .unsupported { + display: none; + } + html { + font-family: 'Inter UI var', sans-serif; + } + html.safari { + font-family: 'Inter UI var safari-fix', sans-serif; + } + html.msedge { + font-family: 'Inter UI var-alt', sans-serif; + } +} + +.samples { + display: flex; + flex-wrap: wrap; +} + +.weightset { + /*background: pink;*/ + margin: 10px; +} + +.intro { + font-size: 0.7em; + padding:2em; + border-bottom: 2px solid #000; + margin-bottom: 1em; +} +.intro em { + font-weight: 500; + font-style: oblique; +} +.intro > * { + max-width: 800px; +} + +.unsupported { + margin: 2em; + text-align: center; +} + +h1, h2 { + margin:0; + font-size: 2em; +} +h2 { + font-size: 1.2em; + font-weight: 600; +} +ul { + padding-left: 1.2em; +} +li { + margin: 0.5em 0; +} +tt { + font-family: Conoslas, Menlo, monospace; + color: #2c5d4e; +} + +</style> +</head> +<body> +<script> +(function(u){ +if (u.indexOf('Safari/') != -1 && u.indexOf('Chrome/') == -1 && u.indexOf('Chromium/') == -1) { + document.documentElement.classList.add('safari') +} else if (u.indexOf('Edge/') != -1) { + document.documentElement.classList.add('msedge') +} +})(navigator.userAgent); +</script> +<div class="intro"> + <h1>Inter UI variable font test</h1> + <p> + Tests how the Inter UI variable font is rendered by the web browser + with the traditional style properties <tt>font-weight</tt> and + <tt>font-style</tt>. + </p> + <p> + We can always use <tt>font-variation-settings</tt> to gain full control + over variable font axes, which works as expected in all major browsers. + This document does <em>not</em> make use of <tt>font-variation-settings</tt>. + </p> + <h2>Known issues:</h2> + <ul> + <li> + <b>Safari 12.0:</b> + Defining <tt>font-weight</tt> in <tt>@font-face</tt> causes + slnt axis to be maxed out by default, causing <tt>font-style:normal</tt> + to be fully slanted/oblique/italic. This is counter-acted by using a + specific <tt>@font-face</tt> for Safari that doesn't define + <tt>font-weight.</tt> + </li> + <li> + <b>Safari 12.0:</b> + <tt>font-synthesis:none</tt> is required or else + <tt>font-style:italic</tt> causes "double-slant" — + the slnt axis gets maxed out as expected, but then faux oblique is + applied on top of it, causing an overly extreme slant. + This means that <tt>font-style:italic</tt> can't be used in Safari, + and instead we use <tt>font-style:oblique</tt> which works in all + major browsers. Note that this effects <tt><em></tt> and + <tt><i></tt> which in Safari implicitly has + <tt>font-style:italic</tt>. + </li> + <li> + <b>Chrome 69:</b> Mapping of <tt>ital</tt> axis to <tt>font-style:italic</tt> + is not supported. + </li> + <li> + <b>Firefox 62:</b> Mapping of <tt>ital</tt> axis to <tt>font-style:italic</tt> + is not supported. + </li> + <li> + <b>Edge 42:</b> Mapping of <tt>ital</tt> axis to <tt>font-style:italic</tt> + is not supported, nor is Mapping of <tt>slnt</tt> axis to <tt>font-style:oblique</tt>. Note: We use separate italic and upright font files for Edge in this + test, which is why intermediate oblique degrees are displayed as either + fully slanted or not slanted at all when viewing this in Edge. + </li> + </ul> +</div> +<div class="unsupported"> + <p>This web browser does not support variable fonts</p> +</div> +<div class="samples"></div> +<script type="text/javascript">(function(){ + +if (getComputedStyle(document.documentElement).fontFamily.indexOf('Inter UI var') == -1) { + // variable fonts unsupported + return; +} + +var samples = document.querySelector('div.samples') +var weight = 400, weightMax = 900, weightStep = 20 +var slant = 0, slantMax = 10, slantStep = 5 + +while (weight <= weightMax) { + slant = 0 + let weightSet = document.createElement('div') + weightSet.className = 'weightset' + + while (slant <= slantMax) { + let e = document.createElement('div') + if (weight != 400) { + e.style.fontWeight = String(weight) + } + if (slant != 0) { + e.style.fontStyle = `oblique ${slant}deg` + e.innerText = `I ${weight} oblique ${slant}` + } else { + e.innerText = `I ${weight}` + } + weightSet.appendChild(e) + slant += slantStep + } + + e = document.createElement('div') + if (weight != 400) { + e.style.fontWeight = String(weight) + } + e.style.fontStyle = 'oblique' + e.innerText = `I ${weight} oblique` + weightSet.appendChild(e) + + e = document.createElement('div') + if (weight != 400) { + e.style.fontWeight = String(weight) + } + e.style.fontStyle = 'italic' + e.innerText = `I ${weight} italic` + weightSet.appendChild(e) + + e = document.createElement('div') + if (weight != 400) { + e.style.fontWeight = String(weight) + } + let em = document.createElement('em') + em.innerText = `I ${weight} <em>` + e.appendChild(em) + weightSet.appendChild(e) + + e = document.createElement('div') + if (weight != 400) { + e.style.fontWeight = String(weight) + } + em = document.createElement('i') + em.innerText = `I ${weight} <i>` + e.appendChild(em) + weightSet.appendChild(e) + + samples.appendChild(weightSet) + weight += weightStep +} + + +})();</script> + </body> +</html>
\ No newline at end of file |