website: big update with samples and vf stuff
This commit is contained in:
Rasmus Andersson
parent
f6050df801
commit
a0df8aa6d4
109 changed files with 232253 additions and 6999 deletions
265
docs/var-test.html
Normal file
265
docs/var-test.html
Normal file
|
|
@ -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>
|
||||
Reference in a new issue