1
1
mirror of https://github.com/rsms/inter.git synced 2024-12-24 16:14:35 +03:00
inter/docs/var-test.html
2019-02-02 14:29:56 -08:00

279 lines
7.3 KiB
HTML

<!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 var experimental';
font-weight: 100 900;
font-style: oblique 0deg 10deg;
font-named-instance: 'Regular';
src: url("font-files/Inter.var.woff2") format("woff2 supports variations(gvar)"),
url("font-files/Inter.var.woff2") format("woff2-variations"),
url("font-files/Inter.var.woff2") 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") format("woff2 supports variations(gvar)"),
url("font-files/Inter.var.woff2") format("woff2-variations"),
url("font-files/Inter.var.woff2") 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-upright.var.woff2") format("woff2 supports variations(gvar)"),
url("font-files/Inter-upright.var.woff2") format("woff2-variations"),
url("font-files/Inter-upright.var.woff2") 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") format("woff2 supports variations(gvar)"),
url("font-files/Inter-italic.var.woff2") format("woff2-variations"),
url("font-files/Inter-italic.var.woff2") 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;
}
}
.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>
<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:</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(){
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')
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'
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>