website: big update with samples and vf stuff

author: Rasmus Andersson <rasmus@notion.se> 2018-10-08 04:32:03 +0300
committer: Rasmus Andersson <rasmus@notion.se> 2018-10-11 09:38:33 +0300
commit: a0df8aa6d40ab7b1e96dafd93a197c6859580454 (patch)
tree: 0d1ca583a4ea9cbb2112a114b66698e3a3ed9358 /docs/var-test.html
parent: f6050df80182f7bfc55e5f2df7c715969a1cb67d (diff)
download: inter-a0df8aa6d40ab7b1e96dafd93a197c6859580454.tar.xz
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>&lt;em&gt;</tt> and
+      <tt>&lt;i&gt;</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
author	Rasmus Andersson <rasmus@notion.se>	2018-10-08 04:32:03 +0300
committer	Rasmus Andersson <rasmus@notion.se>	2018-10-11 09:38:33 +0300
commit	a0df8aa6d40ab7b1e96dafd93a197c6859580454 (patch)
tree	0d1ca583a4ea9cbb2112a114b66698e3a3ed9358 /docs/var-test.html
parent	f6050df80182f7bfc55e5f2df7c715969a1cb67d (diff)
download	inter-a0df8aa6d40ab7b1e96dafd93a197c6859580454.tar.xz