diff options
Diffstat (limited to 'docs/var-test.html')
| -rw-r--r-- | docs/var-test.html | 406 |
1 files changed, 1 insertions, 405 deletions
diff --git a/docs/var-test.html b/docs/var-test.html index c0eff9116..d71da8e24 100644 --- a/docs/var-test.html +++ b/docs/var-test.html @@ -1,407 +1,3 @@ --- -layout: none +redirect_to: https://d.rsms.me/inter-website/v3/var-test.html --- -{% - -for file in site.static_files %}{% - assign _path = file.path | remove_first: "/inter" %}{% - if _path == "/font-files/Inter.var.woff2" %}{% - assign inter_var_woff2_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{% - endif %}{% -endfor - -%}<!DOCTYPE HTML> -<html lang="en"> -<head> -<meta charset="utf-8"> -<meta name="viewport" content="width=device-width, initial-scale=1"> -<style type="text/css"> - -/* - -Note on font file URLs: -- The "v" parameter is used to ensure that the latest font file is used, - and not a past cached version. -- The "t" parameters can be used to debug which of the "format(...)" the - web browser chose (i.e. by using a web browser's developer tools.) - -*/ - -@font-face { - font-family: 'Inter var experimental'; - font-weight: 100 900; - font-style: oblique 0deg -10deg; - font-named-instance: 'Regular'; - src: url("font-files/Inter.var.woff2?t=woff2-variations&v={{inter_var_woff2_v}}") format("woff2-variations"), - url("font-files/Inter.var.woff2?t=woff2&v={{inter_var_woff2_v}}") format("woff2"); -} - -/* Fix for Safari where defining font-weight range casues regular style - to actually be italic. */ -@font-face { - font-family: 'Inter var experimental safari'; - /* DISABLE font-weight: 400 900; */ - font-style: oblique 0deg -10deg; - font-named-instance: 'Regular'; - src: url("font-files/Inter.var.woff2?t=woff2-variations&v={{inter_var_woff2_v}}") format("woff2-variations"), - url("font-files/Inter.var.woff2?t=woff2&v={{inter_var_woff2_v}}") format("woff2"); -} - -/* Alternate two-file setup used for italic where oblique degrees are not - supported (MS Edge) */ -@font-face { - font-family: 'Inter var single-axis'; - font-weight: 100 900; - font-style: normal; - font-named-instance: 'Regular'; - src: url("font-files/Inter-roman.var.woff2?t=woff2-variations&v={{inter_var_woff2_v}}") format("woff2-variations"), - url("font-files/Inter-roman.var.woff2?t=woff2&v={{inter_var_woff2_v}}") format("woff2"); -} -@font-face { - font-family: 'Inter var single-axis'; - /*font-weight: 100 900;*/ - font-style: italic; - font-named-instance: 'Italic'; - src: url("font-files/Inter-italic.var.woff2?t=woff2-variations&v={{inter_var_woff2_v}}") format("woff2-variations"), - url("font-files/Inter-italic.var.woff2?t=woff2&v={{inter_var_woff2_v}}") format("woff2"); -} - - - -html { - font-family: 'Inter', sans-serif; - font-size: 20px; - font-synthesis: none; - letter-spacing: 0; - line-height: 1.3; -} - -body { - margin: 0; - padding: 0; -} - -@supports (font-variation-settings: normal) { - .unsupported { - display: none; - } - html { - font-family: 'Inter var experimental', sans-serif; - } - html.safari { - font-family: 'Inter var experimental safari', sans-serif; - } - html.msedge { - font-family: 'Inter var single-axis', sans-serif; - } -} - -.single-axis { - font-family: 'Inter var single-axis', sans-serif; -} - -.samples { - display: flex; - flex-wrap: wrap; -} -.samples > h2 { - flex: 1 0 100%; - padding-left:20px; - line-height:2; - padding-top: 1em; - border-top:1px solid #ccc; - margin-top: 1em; -} -.weightset { - /*background: pink;*/ - margin: 20px; - width: 200px; - overflow:hidden; - white-space: nowrap; -} - -.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: 2.5em; - font-weight: 700; - letter-spacing: -0.025em; -} -h2 { - font-size: 1.5em; - letter-spacing: -0.02em; -} -ul { - padding-left: 1.2em; -} -li { - margin: 0.5em 0; -} -tt { - font-family: Conoslas, Menlo, monospace; - color: #2c5d4e; -} - -</style> -</head> -<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> -<body> -<div class="intro"> - <h1>Inter variable font test</h1> - <p> - Tests how the Inter 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> - <p> - Effective <tt>font-family: </tt><tt id="family-in-use"></tt> - </p> - <h2>Known issues with variable fonts:</h2> - <ul> - <li> - <b>Most browsers as of August 2019:</b> - <ul> - <li> - Mapping of negative slant axis to <tt>font-style:italic</tt> has no effect.<br> - </li> - <li> - Mapping of negative slant axis to <tt>font-style:oblique</tt> has no effect. - </li> - <li> - All current stable versions of major web browser supports - <tt>format("woff2-variations")</tt> - for font url format in <tt>@font-face</tt> declarations. - </ul> - </li> - <li> - <b>Safari:</b> - <ul> - <li> - 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> - (Last confirmed version: Safari 12.1) - </li> - <li> - <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>. - (Last confirmed version: Safari 12.1) - </li> - </ul> - </li> - <li> - <b>Chrome:</b> - <ul> - <li> - Rendering of overlapping shapes causes "blobs" or "ink bleed". - Overlapping shapes, like the angle + horizontal stem of "A" are - rendered in separate MSAA passes and later combined as bitmaps, - causing a multiplication effect on the alpha channel. - </li> - <li> - Passing explicit degrees to oblique (e.g. <tt>font-style:oblique -5deg</tt>) - is not supported. (Last confirmed version: Chrome 75) - </li> - <li> - For fonts with negative <tt>slnt</tt> values, as per the OT spec, - <tt>font-style:oblique</tt> has no effect (not mapped to negative max of slnt axis.) - (Last confirmed version: Chrome 75) - </li> - <li> - Mapping of negative-value <tt>ital</tt> and <tt>slnt</tt> axis - to <tt>font-style:italic</tt> is not supported. - </li> - <li> - <b>Version <75:</b> Mapping of positive-value <tt>ital</tt> and <tt>slnt</tt> axis - to <tt>font-style:italic</tt> is not supported. - </li> - <li> - <b>Windows only:</b> kerning is incorrect and - there are issues with ClearType where for example a lower-case "r" - (without hints) might be rendered much lower than a lower-case "n". - (Last confirmed version: Chrome 69) - </li> - </ul> - </li> - <li> - <b>Firefox:</b> - <ul> - <li> - For fonts with negative <tt>slnt</tt> values, as per the OT spec, - <tt>font-style:oblique</tt> has no effect (not mapped to negative max of slnt axis.) - (Last confirmed version: Firefox 68) - </li> - <li> - <b>Version <68:</b> Mapping of <tt>ital</tt> axis to <tt>font-style:italic</tt> - is not supported. - </li> - </ul> - </li> - <li> - <b>Edge:</b> - <ul> - <li> - 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 roman 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. - (Last confirmed version: Edge 42) - </li> - </ul> - </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(){ - -var docstyle = getComputedStyle(document.documentElement) - -// family-in-use -document.querySelector('#family-in-use').innerText = docstyle.fontFamily - -if (docstyle.fontFamily.indexOf('Inter var') == -1) { - // variable fonts not unsupported - return; -} - -var samples = document.querySelector('div.samples') - -for (let className of ["multi-axis", "single-axis"]) { - - let h2 = document.createElement('h2') - h2.innerText = className - samples.appendChild(h2) - - var weight = 100, weightMax = 900, weightStep = 20 - var slant = 0, slantMax = 10, slantStep = 5 - - while (weight <= weightMax) { - slant = 0 - let weightSet = document.createElement('div') - weightSet.className = 'weightset ' + className - - if (className == "multi-axis") { - 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} normal` - } - weightSet.appendChild(e) - slant += slantStep - } - } else { - e = document.createElement('div') - if (weight != 400) { - e.style.fontWeight = String(weight) - } - e.innerText = `I ${weight} normal` - weightSet.appendChild(e) - } - - 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) - - if (className == "multi-axis") { - e = document.createElement('div') - if (weight != 400) { - e.style.fontWeight = String(weight) - } - e.style.fontVariationSettings = `'wght' ${weight}, 'slnt' -${slantMax}` - e.innerText = `I ${weight} slnt -${slantMax}` - weightSet.appendChild(e) - } - - samples.appendChild(weightSet) - weight += weightStep - } -} - - -})();</script> - </body> -</html>
\ No newline at end of file |