2018-10-08 04:32:03 +03:00
<!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 >
< 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 >
2018-10-11 20:41:10 +03:00
< body >
2018-10-08 04:32:03 +03:00
< 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" > ( f u n c t i o n ( ) {
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 >
